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
160
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
120
Introducción a Elm
rogeriochaves
0
63
Immutable App Architecture
rogeriochaves
0
200
Faça programação funcional com JavaScript codando menos
rogeriochaves
4
370
Introduction to Elm
rogeriochaves
2
120
Single State Atom apps
rogeriochaves
1
170
Playing with RxJS
rogeriochaves
0
87
Other Decks in Programming
See All in Programming
try!Swift Tokyo 2024 参加報告 LT
akidon0000
1
220
Fragment Composition of GraphQL
quramy
7
1k
TYPO3 v13 – The road to LTS: What's new and new APIs
luisasofie_xoxo
0
210
見た目から始める生産性向上
ikumatadokoro
7
850
PHP8.3の機能を振り返る / Review of PHP 8.3 features
seike460
PRO
1
110
Scalable Customer Journey Orchestration (CJO)
lewuathe
0
340
dbtのドメイン分割による データ基盤の改善とDigdagとの連携
sakama
0
350
educure_カリキュラム生操作マニュアル.pdf
linew_official
0
810
Apache Hive 4 on Treasure Data
ryukobayashi
0
340
Elm 0.19.0 Changes
bkuhlmann
0
490
Snowflakeで眠ったデータを起こそう!
estie
0
120
検証も兼ねて個人開発でHonoとかと向き合った話
hanetsuki
1
1.1k
Featured
See All Featured
The Invisible Side of Design
smashingmag
294
49k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
Thoughts on Productivity
jonyablonski
58
3.8k
The Pragmatic Product Professional
lauravandoore
25
5.8k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Typedesign – Prime Four
hannesfritz
36
2.1k
Making the Leap to Tech Lead
cromwellryan
124
8.5k
Adopting Sorbet at Scale
ufuk
68
8.6k
What the flash - Photography Introduction
edds
64
11k
For a Future-Friendly Web
brad_frost
172
9k
Designing on Purpose - Digital PM Summit 2013
jponch
110
6.5k
[RailsConf 2023] Rails as a piece of cake
palkan
23
4k
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_