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

Implementando PWA em qualquer projeto

Avatar for Rogério Chaves Rogério Chaves
July 27, 2017
Programming
2
190

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
170
A Brief History of Frontend
Avatar for Rogério Chaves rogeriochaves
1
38
Microfrontends
Avatar for Rogério Chaves rogeriochaves
2
140
Introducción a Elm
Avatar for Rogério Chaves rogeriochaves
0
70
Immutable App Architecture
Avatar for Rogério Chaves rogeriochaves
0
210
Faça programação funcional com JavaScript codando menos
Avatar for Rogério Chaves rogeriochaves
4
460
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
97

Other Decks in Programming

See All in Programming
『自分のデータだけ見せたい！』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
Avatar for AkitoTsukahara akitotsukahara
2
660
PicoRuby on Rails
Avatar for makicamel makicamel
3
140
ご注文の差分はこちらですか？ 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
Avatar for Kenji Kono konokenj
3
580
ニーリーにおけるプロダクトエンジニア
Avatar for Nealle nealle
0
950
新メンバーも今日から大活躍！SREが支えるスケールし続ける組織のオンボーディング
Avatar for HonMarkHunt honmarkhunt
5
8.7k
PipeCDのプラグイン化で目指すところ
Avatar for Warashi warashi
1
310
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
Avatar for Yuuki Takahashi yktakaha4
2
1k
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
Avatar for takuya542 takuya542
2
15k
脱Riverpod？fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
Avatar for Takuma Osada ostk0069
0
500
AI Agent 時代のソフトウェア開発を支える AWS Cloud Development Kit (CDK)
Avatar for Kenji Kono konokenj
6
810
Modern Angular with Signals and Signal Store: New Rules for Your Architecture @enterJS Advanced Angular Day 2025
Avatar for Manfred Steyer manfredsteyer
PRO
0
270
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
Avatar for コドモン開発チーム codmoninc
2
21k

Featured

See All Featured
Docker and Python
Avatar for Tania Allard trallard
45
3.5k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
346
40k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
160
23k
Scaling GitHub
Avatar for Zach Holman holman
460
140k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.1k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
207
24k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
331
22k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
282
13k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
332
24k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
181
54k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
189
11k

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_