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

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
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
88
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
130

Other Decks in Programming

See All in Programming
[2026-10-09]一枚の布で作らなくてもいい。 信頼性は「パッチワーク」で紡がれる～既存の運用と新しい可能性をつなぎ合わせてきたCREの話～
Avatar for tosite tosite
0
120
動画プレイヤーはなぜカクつくのか 〜Flutterのレンダリングとネイティブの境界を解剖する〜
Avatar for Naruo Yoshiki naruogram
0
310
ActionController meets Protocol Buffers
Avatar for Sorah Fukumori sorah
1
750
TanStack Vue Query と Pinia Colada から学ぶ非同期状態の型設計
Avatar for aoshi aoshi
0
450
Coding with AI: How to trust the storyteller (AWS Community Day Adria, Ljubljana 2026)
Avatar for Slobodan Stojanović slobodan
0
130
プロジェクトコードをキレイキレイしよう！暗黙的な参照を読み解く静的解析
Avatar for Takuma Osada ostk0069
0
190
Crash Auto Pipelines
Avatar for Veronikapj veronikapj
1
110
No More NoSuchMethodError
Avatar for TATSUNO Yasuhiro exoego
1
120
ChromeでローカルLLM
Avatar for ryu ryu1013
0
180
PumaからFalconに移行したRailsアプリケーションでの実践
Avatar for Hayato OKUMOTO falcon8823
0
300
あなたの await、OS まで届いてる？ strace で覗く JavaScript の非同期
Avatar for hasuto sasaki hasutosasaki
1
1.7k
SODA - FACT BOOK（JP）
Avatar for SODA inc. sodainc
1
40k

Featured

See All Featured
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
61
10k
Un-Boring Meetings
Avatar for Sebastian Deterding codingconduct
0
470
Building AI with AI
Avatar for Ines Montani inesmontani
PRO
1
1.3k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
163
24k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
9.8k
SEO Brein meetup: CTRL+C is not how to scale international SEO
Avatar for Linda Hogenes lindahogenes
2
2.9k
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
520
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
22k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
16k
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
360
B2B Lead Gen: Tactics, Traps & Triumph
Avatar for Sophie Logan marketingsoph
1
290
From π to Pie charts
Avatar for Rasagy Sharma rasagy
1
430

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_