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
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
AI時代におけるSRE、 あるいはエンジニアの生存戦略
pyama86
1
390
Nurturing OpenJDK distribution: Eclipse Temurin Success History and plan
ivargrimstad
0
310
PLoP 2024: The evolution of the microservice architecture pattern language
cer
PRO
0
2.2k
RailsのPull requestsのレビューの時に私が考えていること
yahonda
5
2.6k
推し活の ハイトラフィックに立ち向かう Railsとアーキテクチャ - Kaigi on Rails 2024
falcon8823
6
2.6k
外部システム連携先が10を超えるシステムでのアーキテクチャ設計・実装事例
kiwasaki
1
260
開発効率向上のためのリファクタリングの一歩目の選択肢 ~コード分割~ / JJUG CCC 2024 Fall
ryounasso
0
410
生成 AI を活用した toitta 切片分類機能の裏側 / Inside toitta's AI-Based Factoid Clustering
pokutuna
0
700
Webの技術スタックで マルチプラットフォームアプリ開発を可能にするElixirDesktopの紹介
thehaigo
2
1k
WEBエンジニア向けAI活用入門
sutetotanuki
0
320
Pinia Colada が実現するスマートな非同期処理
naokihaba
4
200
タクシーアプリ『GO』のリアルタイムデータ分析基盤における機械学習サービスの活用
mot_techtalk
4
130
Featured
See All Featured
Being A Developer After 40
akosma
86
590k
Fireside Chat
paigeccino
33
3k
Producing Creativity
orderedlist
PRO
341
39k
Building Applications with DynamoDB
mza
90
6.1k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
505
140k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Building Your Own Lightsaber
phodgson
102
6.1k
Scaling GitHub
holman
458
140k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.8k
[RailsConf 2023] Rails as a piece of cake
palkan
51
4.9k
Into the Great Unknown - MozCon
thekraken
32
1.5k
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_