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
PWA beyond theory - How to create your progress...
Search
Amanda Vilela
December 01, 2018
Technology
0
50
PWA beyond theory - How to create your progressive web app
Presented on DevFest London 2018.
Amanda Vilela
December 01, 2018
Tweet
Share
More Decks by Amanda Vilela
See All by Amanda Vilela
Construindo sua primeira página web: Sua porta de entrada para uma carreira de front-end
amandavilela
1
70
Web Performance: Não deixe o usuário desistir do seu site
amandavilela
1
180
Como tornamos os sorteios da BrazilJS on the Road Sorocaba mais divertidos utilizando JS
amandavilela
0
55
Sobre Carreira e Comunidades
amandavilela
0
29
Crie seu Próprio Plano de Carreira
amandavilela
0
50
Como otimizar a performance da sua aplicação JS
amandavilela
0
90
Você nem sempre precisa de um framework JS
amandavilela
0
73
Que tal usar CSS em vez de JS?
amandavilela
1
83
Front-end: o que é, mercado e como começar
amandavilela
1
81
Other Decks in Technology
See All in Technology
Ask! NIKKEI RAG検索技術の深層
hotchpotch
13
2.8k
The 5 Obstacles to High-Performing Teams
mdalmijn
0
270
開発者が自律的に AWS Security Hub findings に 対応する仕組みと AWS re:Invent 2024 登壇体験談 / Developers autonomously report AWS Security Hub findings Corresponding mechanism and AWS re:Invent 2024 presentation experience
kaminashi
0
190
【Developers Summit 2025】プロダクトエンジニアから学ぶ、 ユーザーにより高い価値を届ける技術
niwatakeru
2
890
リアルタイム分析データベースで実現する SQLベースのオブザーバビリティ
mikimatsumoto
0
950
技術的負債解消の取り組みと専門チームのお話 #技術的負債_Findy
bengo4com
1
1.2k
2.5Dモデルのすべて
yu4u
2
610
AWSでRAGを実現する上で感じた3つの大事なこと
ymae
3
1k
テストアーキテクチャ設計で実現する高品質で高スピードな開発の実践 / Test Architecture Design in Practice
ropqa
3
710
日経電子版 x AIエージェントの可能性とAgentic RAGによって提案書生成を行う技術
masahiro_nishimi
1
290
APIファーストで実現する運用性の高い IoT プラットフォーム: SORACOMのアプローチ
soracom
PRO
0
240
スタートアップ1人目QAエンジニアが QAチームを立ち上げ、“個”からチーム、 そして“組織”に成長するまで / How to set up QA team at reiwatravel
mii3king
1
1.1k
Featured
See All Featured
Become a Pro
speakerdeck
PRO
26
5.1k
A Modern Web Designer's Workflow
chriscoyier
693
190k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
How to Ace a Technical Interview
jacobian
276
23k
Code Reviewing Like a Champion
maltzj
521
39k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Designing Experiences People Love
moore
139
23k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Transcript
PWA BEYOND THEORY How to create your progressive web app
None
13% 87% Mobile web Apps Source: comScore Mobile Metrix, U.S.,
Age 18+, June 2015
80% of time is spent on 3 apps Source: comScore
Mobile Metrix, U.S., Age 18+, June 2015
ZERO number of apps the average user installs per month
Source: comScore Mobile Metrix, U.S., Age 18+, June 2015
New web features • Push Messages • Offline storage •
Audio & Video Capture • Recording Media • Geolocation • Web Bluetooth API • More: https://whatwebcando.today
None
WHAT IS A PWA? it's a website that behaves like
an app
WHAT IS A PWA? new level of caring about the
quality of your end-to-end user experience
Starbucks https://app.starbucks.com
The Washington Post https://www.washingtonpost.com/pwa
Twitter https://mobile.twitter.com
None
PWA aspects • Site works cross-browser • Pages are responsive
on tablets & mobile devices • First load fast even on 3G • All app URLs load while offline • Metadata provided for Add to Home screen • Site is served over HTTPS
✓ site works cross-browser
✓ responsive ✓ first load fast
✓ all app URLs load while offline
SERVICE WORKER advanced offline experiences
Web server
Service worker Client side proxy (wrote in JavaScript) Cache Web
server
SERVICE WORKER it's for the SECOND loading
implementing a Service Worker
None
registering a Service Worker
None
adding install event
None
preload resources
None
activate event
None
almost finishing
None
controlling the loading
None
None
None
cache strategy network, otherwise use the cache
the offline cookbook by Jake Archibald https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/
✓ add to home screen
<link rel="manifest" href="/manifest.json"> { "name": "Currency Converter", "short_name": "CConverter", "icons":
[{ "src": "icon-48x48.png", "sizes": "48x48", "type": "image/png" }, {...}], "start_url": "/index.html", "display": "standalone", "orientation": "portrait", "background_color": "#06f8c5", "theme_color": "#06f8c5" }
manifest.json { "name": "Currency Converter", "short_name": "CConverter", "icons": [{ "src":
"icon-48x48.png", "sizes": "48x48", "type": "image/png" }, {...}], "start_url": "/index.html", "display": "standalone", "orientation": "portrait", "background_color": "#06f8c5", "theme_color": "#06f8c5" }
manifest.json { "name": "Currency Converter", "short_name": "CConverter", "icons": [{ "src":
"icon-48x48.png", "sizes": "48x48", "type": "image/png" }, {...}], "start_url": "/index.html", "display": "standalone", "orientation": "portrait", "background_color": "#06f8c5", "theme_color": "#06f8c5" }
manifest.json { "name": "The Washington Post", "short_name": "Wash Post", "icons":
[{ "src": "icon-48x48.png", "sizes": "48x48", "type": "image/png" }, {...}], "start_url": "/index.html", "display": "standalone", "orientation": "portrait", "background_color": "#06f8c5", "theme_color": "#06f8c5" }
manifest.json { "name": "Currency Converter", "short_name": "CConverter", "icons": [{ "src":
"icon-48x48.png", "sizes": "48x48", "type": "image/png" }, {...}], "start_url": "/index.html", "display": "standalone", "orientation": "portrait", "background_color": "#06f8c5", "theme_color": "#06f8c5" }
✓ safe
keeping users safe is hugely important • Reliability: Is this
the site that the user expects? • Integrity: Has anyone changed this content? • Privacy: Can anyone monitor my navigation?
None
None
Let’s Encrypt is a trademark of the Internet Security Research
Group.
that's all :D
last considerations • Storage is not required • Easy to
share (conversion flow) • Always updated • Lower costs compared to native app development.
Lighthouse
use your creativity • https://developers.google.com/web/progressive-web-apps/checklist • https://whatwebcando.today
try it: http://bit.ly/pwacconverter
the code is available on github: https://github.com/amandavilela/currencyconverter
Obrigada! Amanda Vilela amandavilela.com