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
160
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
410
Introduction to Elm
rogeriochaves
2
130
Single State Atom apps
rogeriochaves
1
170
Playing with RxJS
rogeriochaves
0
92
Other Decks in Programming
See All in Programming
エンジニアとして関わる要件と仕様(公開用)
murabayashi
0
320
リアーキテクチャxDDD 1年間の取り組みと進化
hsawaji
1
230
みんなでプロポーザルを書いてみた
yuriko1211
0
290
CSC509 Lecture 12
javiergs
PRO
0
160
聞き手から登壇者へ: RubyKaigi2024 LTでの初挑戦が 教えてくれた、可能性の星
mikik0
1
140
Realtime API 入門
riofujimon
0
160
Jakarta EE meets AI
ivargrimstad
0
930
.NET のための通信フレームワーク MagicOnion 入門 / Introduction to MagicOnion
mayuki
1
2.2k
Remix on Hono on Cloudflare Workers
yusukebe
1
320
TypeScript Graph でコードレビューの心理的障壁を乗り越える
ysk8hori
3
1.3k
C++でシェーダを書く
fadis
6
4.2k
よくできたテンプレート言語として TypeScript + JSX を利用する試み / Using TypeScript + JSX outside of Web Frontend #TSKaigiKansai
izumin5210
7
1.8k
Featured
See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
0
160
Documentation Writing (for coders)
carmenintech
65
4.4k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
960
Music & Morning Musume
bryan
46
6.2k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.8k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
The Invisible Side of Design
smashingmag
298
50k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2.1k
Fireside Chat
paigeccino
34
3k
Product Roadmaps are Hard
iamctodd
PRO
49
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_