Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Implementando PWA em qualquer projeto

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Rogério Chaves Rogério Chaves
July 27, 2017
Programming
230
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
210
A Brief History of Frontend
Avatar for Rogério Chaves rogeriochaves
1
86
Microfrontends
Avatar for Rogério Chaves rogeriochaves
2
150
Introducción a Elm
Avatar for Rogério Chaves rogeriochaves
0
84
Immutable App Architecture
Avatar for Rogério Chaves rogeriochaves
0
240
Faça programação funcional com JavaScript codando menos
Avatar for Rogério Chaves rogeriochaves
4
530
Introduction to Elm
Avatar for Rogério Chaves rogeriochaves
2
170
Single State Atom apps
Avatar for Rogério Chaves rogeriochaves
1
200
Playing with RxJS
Avatar for Rogério Chaves rogeriochaves
0
120

Other Decks in Programming

See All in Programming
なぜCTOを降りてFDEを選んだのか？〜なぜプロダクト企業がFDEで顧客の現場に踏み込むのか〜
Avatar for ryuta sakamoto gonta
1
170
Turning Architecture into Unit Tests in the AI Era (NSSpain XIV)
Avatar for Stelios Frantzeskakis steliosf
PRO
1
140
速習iPhone Duo対応
Avatar for 野瀬田　裕樹 yuukiw00w
2
970
機械に任せるテスト、人が見るテスト ⽣成AIで引き直した、運⽤保守フェーズの線引き
Avatar for KUSATAKE Daisuke dske104
0
170
Augmenting AI with the Power of Jakarta EE
Avatar for ivargrimstad ivargrimstad
0
510
ジョジョの世界をXRで再現する
Avatar for mofurune mofurune
0
140
設計次第でAIコードの読む量は減らせる / designing-for-code-reading
Avatar for MinoDriven minodriven
34
16k
Unity6 URPによる海底をテーマにしたVJシステムの解説 | Unity Shader 完全に理解した 勉強会
Avatar for がむ gam0022
0
340
Atomic Design, Enforced: Scaling Mobile Design Systems (next.app devCon / droidCon Berlin 2026)
Avatar for Stelios Frantzeskakis steliosf
PRO
0
160
プロダクトコードからライブラリの境界を見つける
Avatar for elmetal elmetal
PRO
0
110
SalesForceを内製化！？ ~ HR事業を支える顧客管理基盤のインフラを大公開 ~
Avatar for Kobujee_53 oku053
0
160
UPDATE をやめる — EF Core でマスタをバージョン管理する
Avatar for HideyukiKitao panda728
PRO
0
1.2k

Featured

See All Featured
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
3.2k
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
8.1k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
301
52k
The Mindset for Success: Future Career Progression
Avatar for Greg Gifford greggifford
PRO
0
530
HTML-Aware ERB: The Path to Reactive Rendering @ RubyCon 2026, Rimini, Italy
Avatar for Marco Roth marcoroth
5
780
The untapped power of vector embeddings
Avatar for Frank van Dijk frankvandijk
2
1.9k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
56
3.5k
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
Avatar for Mfonobong Umondia mfonobong
2
580
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
76
5.4k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
31
6.3k
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
Avatar for Tech SEO Connect techseoconnect
PRO
0
450
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.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_