Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Implementando PWA em qualquer projeto
Search
Rogério Chaves
July 27, 2017
Programming
2
200
Implementando PWA em qualquer projeto
ou: removendo a mágica de progressive web apps
Rogério Chaves
July 27, 2017
Tweet
Share
More Decks by Rogério Chaves
See All by Rogério Chaves
O problema das Fake News
rogeriochaves
1
170
A Brief History of Frontend
rogeriochaves
1
43
Microfrontends
rogeriochaves
2
140
Introducción a Elm
rogeriochaves
0
71
Immutable App Architecture
rogeriochaves
0
210
Faça programação funcional com JavaScript codando menos
rogeriochaves
4
470
Introduction to Elm
rogeriochaves
2
140
Single State Atom apps
rogeriochaves
1
180
Playing with RxJS
rogeriochaves
0
98
Other Decks in Programming
See All in Programming
株式会社 Sun terras カンパニーデック
sunterras
0
190
GraphQL×Railsアプリのデータベース負荷分散 - 月間3,000万人利用サービスを無停止で
koxya
1
1k
気づいて!アプリからのSOS 〜App Store Connect APIで始めるパフォーマンス健康診断〜
waka12
0
260
CSC305 Lecture 03
javiergs
PRO
0
230
CSS Linter の現在地 2025年のベストプラクティスを探る
ryo_manba
10
3.2k
CSC305 Lecture 02
javiergs
PRO
1
260
Back to the Future: Let me tell you about the ACP protocol
terhechte
0
120
Local Peer-to-Peer APIはどのように使われていくのか?
hal_spidernight
2
440
CSC509 Lecture 01
javiergs
PRO
1
430
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
nrslib
2
350
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
170
Swift Concurrency - 状態監視の罠
objectiveaudio
2
430
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
185
22k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
Designing for Performance
lara
610
69k
How to train your dragon (web standard)
notwaldorf
96
6.3k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
570
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
The World Runs on Bad Software
bkeepers
PRO
71
11k
What's in a price? How to price your products and services
michaelherold
246
12k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Bash Introduction
62gerente
615
210k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Transcript
IMPLEMENTANDO PWA EM QUALQUER PROJETO ou: removendo a mágica de
progressive web apps
O QUE SÃO PROGRESSIVE WEB APPS? 2
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 Como saber se estou no caminho correto? Lighthouse
LIGHTHOUSE 5
BREAKING NEWS! AGORA INTEGRADO COM CHROME! 6
PWA CHECKLIST 7
INSTALAÇÃO NATIVA 8
ICONS & MANIFEST 9 realfavicongenerator.net Faz tudo pra você!
MANIFEST.JSON 10
ÍCONES 11
SPLASH SCREEN 12
FERRAMENTAS DO CHROME 13
APP INSTALADO 14
SERVER-SIDE RENDERING 15
O QUE É SERVER SIDE RENDERING 16 Basicamente diminuir o
tempo em tela branca
CLIENT SIDE RENDERING VS SERVER SIDE RENDERING 17 Carregando HTML
Carregando JS Render + Interativo Carregando HTML Interativo Render + Carregando JS
UNCANNY VALLEY 18
UNCANNY VALLEY 19
COMO IMPLEMENTAR 20 elm-static-html react prerender.io
PRERENDER.IO 21 •Solução fácil e genérica
MODO OFFLINE 22
SW-PRECACHE 23
SERVICE WORKERS 24
GUARDAR DADOS OFFLINE 25
HTTPS 26
HTTPS FÁCIL 27
HTTP É PASSADO 28
ACCESSIBILITY 29
CÓDIGO - LIGHTHOUSE 30
CORES - MATERIAL COLOR TOOL 31 https://material.io/color/
AWESOME ACCESSIBILITY https://github.com/brunopulis/awesome-a11y 32
33 DEMO https://github.com/rogeriochaves/elm-todomvc-pwa
OBRIGADO! twitter.com/_rchaves_