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 progressive web app
Search
Amanda Vilela
December 01, 2018
Technology
0
48
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
0
48
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
51
Sobre Carreira e Comunidades
amandavilela
0
27
Como melhorar seu trabalho remoto
amandavilela
0
46
Crie seu Próprio Plano de Carreira
amandavilela
0
48
Como otimizar a performance da sua aplicação JS
amandavilela
0
88
Você nem sempre precisa de um framework JS
amandavilela
0
68
Que tal usar CSS em vez de JS?
amandavilela
1
71
Other Decks in Technology
See All in Technology
Scaling Technical Excellence at 104: Evolution in AWS and Developer Empowerment
scotthsieh825
1
170
20240724_cm_odyssey_hibiyatech
hiashisan
0
120
完全に理解した!生成AI自社プロダクトのアジャイル開発の進め方!/ Fully understood! Agile tips for developing our generative AI product!(AOAI Dev Day)
jnymyk
1
150
たくさん本を読んだけど 1年後には綺麗サッパリ!を乗り越えて 学習の鬼になるぞ👹
yum3
0
160
DDDにおける認可の扱いとKotlinにおける実装パターン / authorization-for-ddd-and-kotlin-implement-pattern
urmot
4
390
Luupの開発組織におけるインシデントマネジメントの変遷 ver.RoadtoSRENEXT2024
grimoh
1
270
AI研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
130
DevIO2024_レガシー運用からの脱却 -クラウド活用の実践事例とベストプラクティス-
jun2882
0
210
Azure OpenAI Service Dev Day / LLMでできる!使える!生成AIエージェント
masahiro_nishimi
3
840
What is DRE? - Road to SRE NEXT@広島
chanyou0311
3
640
Matterport を使ってクラスメソッド各拠点のバーチャルオフィスツアーを作成してみた
wakatsuki
0
160
エンジニアの生存戦略 〜クラウド潮流の経験から紐解く技術トレンドのメカニズムと乗りこなし方〜
shimy
9
1.9k
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
124
16k
Build your cross-platform service in a week with App Engine
jlugia
227
17k
How GitHub Uses GitHub to Build GitHub
holman
471
290k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
17
8.7k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
90
47k
Git: the NoSQL Database
bkeepers
PRO
423
64k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
23
1.9k
Producing Creativity
orderedlist
PRO
340
39k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
16
1.6k
Fantastic passwords and where to find them - at NoRuKo
philnash
42
2.7k
From Idea to $5000 a Month in 5 Months
shpigford
377
46k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
24
1.8k
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