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
190
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
37
Microfrontends
rogeriochaves
2
140
Introducción a Elm
rogeriochaves
0
69
Immutable App Architecture
rogeriochaves
0
210
Faça programação funcional com JavaScript codando menos
rogeriochaves
4
450
Introduction to Elm
rogeriochaves
2
140
Single State Atom apps
rogeriochaves
1
180
Playing with RxJS
rogeriochaves
0
97
Other Decks in Programming
See All in Programming
Gleamという選択肢
comamoca
6
740
Claude Codeの使い方
ttnyt8701
1
130
Is Xcode slowly dying out in 2025?
uetyo
1
180
型付きアクターモデルがもたらす分散シミュレーションの未来
piyo7
0
800
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
240
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
1
160
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
940
Julia という言語について (FP in Julia « SIDE: F ») for 関数型まつり2025
antimon2
3
970
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
41
28k
FormFlow - Build Stunning Multistep Forms
yceruto
1
190
都市をデータで見るってこういうこと PLATEAU属性情報入門
nokonoko1203
1
550
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
120
Featured
See All Featured
Statistics for Hackers
jakevdp
799
220k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Six Lessons from altMBA
skipperchong
28
3.8k
Agile that works and the tools we love
rasmusluckow
329
21k
Bash Introduction
62gerente
614
210k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.3k
Why Our Code Smells
bkeepers
PRO
337
57k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
How STYLIGHT went responsive
nonsquared
100
5.6k
Being A Developer After 40
akosma
90
590k
Code Reviewing Like a Champion
maltzj
524
40k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
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_