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
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
280
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
260
SODA - FACT BOOK(JP)
sodainc
1
8.6k
React Nativeならぬ"Vue Native"が実現するかも?_新世代マルチプラットフォーム開発フレームワークのLynxとLynxのVue.js対応を追ってみよう_Vue Lynx
yut0naga1_fa
2
400
Software Architecture
hschwentner
6
2.3k
Reactive Thinking with Signals and the Resource API
manfredsteyer
PRO
0
110
CSC509 Lecture 07
javiergs
PRO
0
240
CSC305 Lecture 08
javiergs
PRO
0
270
PHPに関数型の魂を宿す〜PHP 8.5 で実現する堅牢なコードとは〜 #phpcon_hiroshima / phpcon-hiroshima-2025
shogogg
1
330
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
530
kiroとCodexで最高のSpec駆動開発を!!数時間で web3ネイティブなミニゲームを作ってみたよ!
mashharuki
0
880
コード生成なしでモック処理を実現!ovechkin-dm/mockioで学ぶメタプログラミング
qualiarts
0
260
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.6k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
253
22k
How to Ace a Technical Interview
jacobian
280
24k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
Writing Fast Ruby
sferik
629
62k
Building a Scalable Design System with Sketch
lauravandoore
463
33k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Java REST API Framework Comparison - PWX 2021
mraible
34
8.9k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Reflections from 52 weeks, 52 projects
jeffersonlam
353
21k
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_