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

Implementando PWA em qualquer projeto

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
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
過去のレビュー知見をSkillsで資産化した話
Avatar for PKSHA Technology（パークシャテクノロジー） pkshadeck
PRO
1
2k
〜バイブコーディングを超えて〜 チームで実験し続けたAI駆動開発
Avatar for Toranosuke Minamikawa tigertora7571
0
210
書き換えて学ぶTemporal #fukts
Avatar for Hiroyuki ANAI pirosikick
2
380
AlarmKitで明後日起きれるアラームアプリを作る
Avatar for Trickart trickart
0
140
🦞OpenClaw works with AWS
Avatar for matsukada licux
1
370
SkillsをS3 Filesに置く時のあれこれ
Avatar for watany watany
3
1.6k
空間オーディオの活用
Avatar for Yuki Yasoshima objectiveaudio
0
150
リセットCSSを1行消したらアクセシビリティが向上した話
Avatar for pvcresin pvcresin
4
520
AI時代のエンジニアリングの原則 / Engineering Principles in the AI ​​Era
Avatar for haru860 haru860
0
1.3k
RailsTokyo 2026#4: AI様があれば、
Hotwireの弱点は消えるか？
Avatar for Naofumi Kagami naofumi
2
340
Agentic Elixir
Avatar for Andrea Leopardi whatyouhide
0
450
Skillは並べた。動かなかった。契約で繋いだ。— 65個のSkillから、自走する開発サイクルへ
Avatar for じゅん junholee
0
600

Featured

See All Featured
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.5k
SEO in 2025: How to Prepare for the Future of Search
Avatar for Michael King ipullrank
3
3.4k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon Słowik szymonslowik
1
1.1k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
57
14k
Redefining SEO in the New Era of Traffic Generation
Avatar for Szymon Słowik szymonslowik
1
300
Believing is Seeing
Avatar for Spiro Bolos oripsolob
1
120
Are puppies a ranking factor?
Avatar for Jono Alderson jonoalderson
1
3.4k
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
Avatar for UX Y'all uxyall
0
290
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
Avatar for Tech SEO Connect techseoconnect
PRO
0
180
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
Avatar for Ines Montani inesmontani
PRO
3
3.4k
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
7.6k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
55
8.1k

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_