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
54
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
80
Web Performance: Não deixe o usuário desistir do seu site
amandavilela
1
190
Como tornamos os sorteios da BrazilJS on the Road Sorocaba mais divertidos utilizando JS
amandavilela
0
58
Sobre Carreira e Comunidades
amandavilela
0
32
Crie seu Próprio Plano de Carreira
amandavilela
0
52
Como otimizar a performance da sua aplicação JS
amandavilela
0
98
Você nem sempre precisa de um framework JS
amandavilela
0
76
Que tal usar CSS em vez de JS?
amandavilela
1
90
Front-end: o que é, mercado e como começar
amandavilela
1
85
Other Decks in Technology
See All in Technology
Coding Agentに値札を付けろ
watany
3
560
Google Cloud Next 2025 Recap 生成AIモデルとマーケティングでのコンテンツ生成 / Generative AI models and content creation in marketing
kyou3
0
300
SRE本出版からまもなく10年!〜これまでに何が起こり、これから何が起こるのか〜
katsuhisa91
PRO
0
350
Ninno LT
kawaguti
PRO
1
120
続・やっぱり余白が大切だった話
kakehashi
PRO
4
360
Why Platform Engineering? - マルチプロダクト・少人数 SRE の壁を越える挑戦 -
nulabinc
PRO
5
470
Vibe Coding Tools
ijin
1
280
Docker Compose で手軽に手元環境を実現する / Simplifying Local Environments with Docker Compose #CinemaDeLT
nabeo
0
230
4月15日の AZ 障害をテクサポの中の人目線で振り返ってみる
kazzpapa3
2
160
20 Years of Domain-Driven Design: What I’ve Learned About DDD
ewolff
1
380
Cursorを全エンジニアに配布 その先に見据えるAI駆動開発の未来 / 2025-05-13-forkwell-ai-study-1-cursor-at-loglass
itohiro73
2
650
正式リリースされた Semantic Kernel の Agent Framework 全部紹介!
okazuki
1
1.2k
Featured
See All Featured
KATA
mclloyd
29
14k
Automating Front-end Workflow
addyosmani
1370
200k
Fontdeck: Realign not Redesign
paulrobertlloyd
84
5.5k
Faster Mobile Websites
deanohume
307
31k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
5
580
Typedesign – Prime Four
hannesfritz
41
2.6k
How GitHub (no longer) Works
holman
314
140k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.4k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
137
33k
Code Reviewing Like a Champion
maltzj
523
40k
Rails Girls Zürich Keynote
gr2m
94
13k
Being A Developer After 40
akosma
91
590k
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