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
180
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
150
A Brief History of Frontend
rogeriochaves
1
24
Microfrontends
rogeriochaves
2
130
Introducción a Elm
rogeriochaves
0
65
Immutable App Architecture
rogeriochaves
0
200
Faça programação funcional com JavaScript codando menos
rogeriochaves
4
400
Introduction to Elm
rogeriochaves
2
130
Single State Atom apps
rogeriochaves
1
170
Playing with RxJS
rogeriochaves
0
91
Other Decks in Programming
See All in Programming
What is Parser
yui_knk
9
4.2k
GraphQLの魅力を引き出すAndroidクライアント実装
morux2
3
800
Patched fetch did not work
quramy
4
400
Amazon BedrockでサーバレスなAIお料理ボットを作成する!!
tosuri13
0
230
Our Websites Need a Lifestyle Change, Not a Diet
ryantownsend
0
150
僕が思い描くTypeScriptの未来を勝手に先取りする
yukukotani
9
2.4k
What you can do with Ruby on WebAssembly
kateinoigakukun
0
170
Prolog入門
qnighy
4
1k
Swiftコードバトル必勝法
toshi0383
0
170
はじめてみよう量子プログラミング
itokoichi01
0
220
Some more adventure of Happy Eyeballs
coe401_
2
190
いつか使える ObjectSpace / Maybe useful ObjectSpace
euglena1215
2
140
Featured
See All Featured
Designing Experiences People Love
moore
138
23k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
32k
Web Components: a chance to create the future
zenorocha
309
42k
Clear Off the Table
cherdarchuk
91
320k
How to name files
jennybc
75
98k
The Pragmatic Product Professional
lauravandoore
31
6.2k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
326
21k
Docker and Python
trallard
39
3k
Robots, Beer and Maslow
schacon
PRO
157
8.2k
Optimizing for Happiness
mojombo
375
69k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
663
120k
Pencils Down: Stop Designing & Start Developing
hursman
119
11k
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_