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
2
210

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
Tweet

More Decks by Rogério Chaves

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

Other Decks in Programming

See All in Programming
AIエージェント、”どう作るか”で差は出るか？ / AI Agents: Does the "How" Make a Difference?
Avatar for r-kagaya rkaga
4
2k
AIと一緒にレガシーに向き合ってみた
Avatar for nyafunta9858 nyafunta9858
0
160
なぜSQLはAIぽく見えるのか/why does SQL look AI like
Avatar for florets1 florets1
0
440
余白を設計しフロントエンド開発を 加速させる
Avatar for karacoro / からころ tsukuha
7
2.1k
CSC307 Lecture 06
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
680
フルサイクルエンジニアリングをAI Agentで全自動化したい 〜構想と現在地〜
Avatar for Kaito Minatoya kamina_zzz
0
400
Unicodeどうしてる？ PHPから見たUnicode対応と他言語での対応についてのお伺い
Avatar for てきめん tekimen youkidearitai
PRO
1
1.1k
IFSによる形状設計／デモシーンの魅力 @ 慶應大学SFC
Avatar for がむ gam0022
1
290
生成AIを使ったコードレビューで定性的に品質カバー
Avatar for Chiaki Okamoto chiilog
1
230
フロントエンド開発の勘所 -複数事業を経験して見えた判断軸の違い-
Avatar for Yoichiro Kubo heimusu
7
2.8k
Spinner 軸ズレ現象を調べたらレンダリング深淵に飲まれた #レバテックMeetup
Avatar for 弁護士ドットコム bengo4com
1
230
FOSDEM 2026: STUNMESH-go: Building P2P WireGuard Mesh Without Self-Hosted Infrastructure
Avatar for Date Huang tjjh89017
0
140

Featured

See All Featured
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.7k
My Coaching Mixtape
Avatar for mlcsv mlcsv
0
46
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
47
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
9.5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
231
22k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
359
30k
Leo the Paperboy
Avatar for Maya Tellez mayatellez
4
1.4k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
8k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.6k
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
Avatar for Kenny Baas-Schwegler baasie
0
220
WENDY [Excerpt]
Avatar for Tessa Abrams tessaabrams
9
36k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
5k

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_