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
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
190
A Brief History of Frontend
Avatar for Rogério Chaves rogeriochaves
1
55
Microfrontends
Avatar for Rogério Chaves rogeriochaves
2
150
Introducción a Elm
Avatar for Rogério Chaves rogeriochaves
0
77
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
500
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
Codex CLIのSubagentsによる並列API実装 / Parallel API Implementation with Codex CLI Subagents
Avatar for 冨澤宝斗 takatty
2
770
生成 AI 時代のスナップショットテストってやつを見せてあげますよ（α版）
Avatar for ojun ojun9
0
330
Reactive ❤️ Loom: A Forbidden Love Story
Avatar for Francesco Nigro franz1981
2
210
ポーリング処理廃止によるイベント駆動アーキテクチャへの移行
Avatar for Seitaro Fujigaki seitarof
3
1.3k
PHPのバージョンアップ時にも役立ったAST（2026年版）
Avatar for Atsushi Matsuo matsuo_atsushi
0
280
Cyrius ーLinux非依存にコンテナをネイティブ実行する専用OSー
Avatar for n4mlz n4mlz
0
270
Claude Codeログ基盤の構築
Avatar for giginet giginet
PRO
7
3.8k
「速くなった気がする」をデータで疑う
Avatar for Leaf senleaf24
0
130
「効かない！」依存性注入（DI）を活用したAPI Platformのエラーハンドリング奮闘記
Avatar for Maki Hayashi mkmk884
0
290
GC言語のWasm化とComponent Modelサポートの実践と課題 - Scalaの場合
Avatar for Rikito Taniguchi tanishiking
0
140
PHPで TLSのプロトコルを実装してみる
Avatar for higaki higaki_program
0
730
最初からAWS CDKで技術検証してもいいんじゃない？
Avatar for アキキー | Akihisa Ikeda akihisaikeda
4
180

Featured

See All Featured
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
183
10k
Test your architecture with Archunit
Avatar for Yoan thirion
1
2.2k
Kristin Tynski - Automating Marketing Tasks With AI
Avatar for Tech SEO Connect techseoconnect
PRO
0
210
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
274
21k
The AI Search Optimization Roadmap by Aleyda Solis
Avatar for Aleyda Solis aleyda
1
5.5k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
82
6.2k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
199
73k
[SF Ruby Conf 2025] Rails X
Avatar for Vladimir Dementyev palkan
2
880
Color Theory Basics | Prateek | Gurzu
Avatar for Gurzu gurzu
0
270
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
2
260
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
34k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
249
1.3M

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_