Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Implementando PWA em qualquer projeto

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Rogério Chaves Rogério Chaves
July 27, 2017
Programming
220
2

Implementando PWA em qualquer projeto

ou: removendo a mágica de progressive web apps

Avatar for Rogério Chaves

Rogério Chaves

July 27, 2017

More Decks by Rogério Chaves

See All by Rogério Chaves
O problema das Fake News
Avatar for Rogério Chaves rogeriochaves
1
200
A Brief History of Frontend
Avatar for Rogério Chaves rogeriochaves
1
60
Microfrontends
Avatar for Rogério Chaves rogeriochaves
2
150
Introducción a Elm
Avatar for Rogério Chaves rogeriochaves
0
80
Immutable App Architecture
Avatar for Rogério Chaves rogeriochaves
0
230
Faça programação funcional com JavaScript codando menos
Avatar for Rogério Chaves rogeriochaves
4
510
Introduction to Elm
Avatar for Rogério Chaves rogeriochaves
2
150
Single State Atom apps
Avatar for Rogério Chaves rogeriochaves
1
180
Playing with RxJS
Avatar for Rogério Chaves rogeriochaves
0
110

Other Decks in Programming

See All in Programming
GitHubCopilotCLIをはじめよう.pdf
Avatar for tkym htkym
0
330
Oxlintはいかにしてtsgolintのlint ruleを呼び出しているのか
Avatar for syumai syumai
0
170
運転動画を検索可能にする〜Cosmos-Embed1とDatabricks Vector Searchで〜/cosmos-embed1-databricks-vector-search
Avatar for 開発室Graph studio_graph
3
950
Cloudflare で始める Data Platform
Avatar for Takumi Abe ta93abe
0
170
過去のレビュー知見をSkillsで資産化した話
Avatar for PKSHA Technology（パークシャテクノロジー） pkshadeck
PRO
1
2k
【ディップ｜26年新卒研修資料】TDD実装演習
Avatar for ディップ株式会社 dip_tech
PRO
0
190
Programming with a DJ Controller — not vibe coding
Avatar for seki at druby.org m_seki
3
860
AI時代になぜ書くのか
Avatar for Mutz mutsumix
0
410
Terraform言語の静的解析 / static analysis of Terraform language
Avatar for Kazuma Watanabe wata727
1
150
Structured Concurrency, Scoped Values and Joiners in the JDK 25 26 27
Avatar for José josepaumard
1
150
Augmenting AI with the Power of Jakarta EE
Avatar for ivargrimstad ivargrimstad
0
480
Agent Skills を社内で育てる仕組み作り
Avatar for jackchuka jackchuka
1
2k

Featured

See All Featured
Lightning talk: Run Django tests with GitHub Actions
Avatar for Sarah Abderemane sabderemane
0
180
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
Avatar for Aleyda Solis aleyda
2
10k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
20k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
34
2.7k
Introduction to Domain-Driven Design and Collaborative software design
Avatar for Kenny Baas-Schwegler baasie
1
780
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
55
12k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
275
41k
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
2
370
The B2B funnel & how to create a winning content strategy
Avatar for Katarina Dahlin katarinadahlin
PRO
1
360
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
199
73k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k

Transcript

  1. IMPLEMENTANDO PWA EM QUALQUER PROJETO ou: removendo a mágica de

    progressive web apps

  2. O QUE SÃO PROGRESSIVE WEB APPS? 2

  3. EM RESUMO •Habilidade de instalar como um app nativo no

    android e chrome desktop •Splash screen, ícones, etc •Server-Side Rendering •Funciona Offline •HTML e CSS carregam mesmo se o javascript estiver quebrado •Foco em acessibilidade •É performático •Usa HTTPs 3

  4. 4 Como saber se estou no caminho correto? Lighthouse

  5. LIGHTHOUSE 5

  6. BREAKING NEWS! AGORA INTEGRADO COM CHROME! 6

  7. PWA CHECKLIST 7

  8. INSTALAÇÃO NATIVA 8

  9. ICONS & MANIFEST 9 realfavicongenerator.net Faz tudo pra você!

  10. MANIFEST.JSON 10

  11. ÍCONES 11

  12. SPLASH SCREEN 12

  13. FERRAMENTAS DO CHROME 13

  14. APP INSTALADO 14

  15. SERVER-SIDE RENDERING 15

  16. O QUE É SERVER SIDE RENDERING 16 Basicamente diminuir o

    tempo em tela branca

  17. CLIENT SIDE RENDERING VS SERVER SIDE RENDERING 17 Carregando HTML

    Carregando JS Render + Interativo Carregando HTML Interativo Render + Carregando JS

  18. UNCANNY VALLEY 18

  19. UNCANNY VALLEY 19

  20. COMO IMPLEMENTAR 20 elm-static-html react prerender.io

  21. PRERENDER.IO 21 •Solução fácil e genérica

  22. MODO OFFLINE 22

  23. SW-PRECACHE 23

  24. SERVICE WORKERS 24

  25. GUARDAR DADOS OFFLINE 25

  26. HTTPS 26

  27. HTTPS FÁCIL 27

  28. HTTP É PASSADO 28

  29. ACCESSIBILITY 29

  30. CÓDIGO - LIGHTHOUSE 30

  31. CORES - MATERIAL COLOR TOOL 31 https://material.io/color/

  32. AWESOME ACCESSIBILITY https://github.com/brunopulis/awesome-a11y 32

  33. 33 DEMO https://github.com/rogeriochaves/elm-todomvc-pwa

  34. OBRIGADO! twitter.com/_rchaves_