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

Implementando PWA em qualquer projeto

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
82
Microfrontends
Avatar for Rogério Chaves rogeriochaves
2
150
Introducción a Elm
Avatar for Rogério Chaves rogeriochaves
0
83
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
マイコン向けの軽量Ruby「PicoRuby」で各種デバイスを制御するネイティブアプリの実現手法
Avatar for bash0C7 bash0c7
0
420
Are APIs Still Relevant in the AI Era?
Avatar for Antoine Bluchet soyuka
0
270
The Rails Doctrine Decade
Avatar for Koichi ITO koic
2
150
XHTMLが残したもの
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
2
820
Augmenting AI with the Power of Jakarta EE
Avatar for ivargrimstad ivargrimstad
0
220
WebMCP Challenge に星空観察アプリで参加した話
Avatar for dario okazaki okajun35
0
180
世界の中心で、AI（App Intents）をさけぶ ー App Intents中心設計の実践ガイド
Avatar for touyou touyou
0
620
UPDATE をやめる — EF Core でマスタをバージョン管理する
Avatar for HideyukiKitao panda728
PRO
0
210
WebAssembly in Android Apps 〜 WASMはJNIの夢を見るか
Avatar for ARIYAMA Keiji keiji
1
110
Snowflakeで業務アプリを作ろう。 Snowflakeのアプリ機能解説&実践ガイド
Avatar for Ayumu Yamaguchi ayumu_yamaguchi
1
280
iOSDC2026登壇資料.pdf
Avatar for RioFujimon riofujimon
0
170
速く作れる。その次は、速く確かめられる開発へ 〜AIネイティブ開発を支える、Shift Down〜 / Can build fast. Next, moving to development where we can verify fast.
Avatar for r-kagaya rkaga
5
3.4k

Featured

See All Featured
How Fast Is Fast Enough? [PerfNow 2025]
Avatar for Tammy Everts tammyeverts
3
890
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
0
3.8k
Digital Ethics as a Driver of Design Innovation
Avatar for Per Axbom axbom
PRO
1
430
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
Avatar for Sophie Logan marketingsoph
0
410
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2.4k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
2
500
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
1.7k
B2B Lead Gen: Tactics, Traps & Triumph
Avatar for Sophie Logan marketingsoph
0
240
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
41k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.6k
End of SEO as We Know It (SMX Advanced Version)
Avatar for Michael King ipullrank
3
4.4k
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
2
550

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_