Progressive Web Apps Google Mobile Solutions Consultant Bojan...
Transcript of Progressive Web Apps Google Mobile Solutions Consultant Bojan...
![Page 1: Progressive Web Apps Google Mobile Solutions Consultant Bojan …files.runet-id.com/2018/rif/presentations/20apr.rif18... · 2018-04-20 · Progressive Web Apps Bojan Pavic Mobile](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ec55ec3419eb03a822196e6/html5/thumbnails/1.jpg)
Progressive Web AppsBojan PavicMobile Solutions ConsultantGoogle
![Page 2: Progressive Web Apps Google Mobile Solutions Consultant Bojan …files.runet-id.com/2018/rif/presentations/20apr.rif18... · 2018-04-20 · Progressive Web Apps Bojan Pavic Mobile](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ec55ec3419eb03a822196e6/html5/thumbnails/2.jpg)
vs.
Source: comScore Mobile Metrix, U.S., Age 18+, June 2017
13% 87%
Mobile web Apps
![Page 3: Progressive Web Apps Google Mobile Solutions Consultant Bojan …files.runet-id.com/2018/rif/presentations/20apr.rif18... · 2018-04-20 · Progressive Web Apps Bojan Pavic Mobile](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ec55ec3419eb03a822196e6/html5/thumbnails/3.jpg)
Source: comScore Mobile Metrix (Custom), U.S., Age 18+, June 2017
78%of time spent is inusers’ top 3 apps
![Page 4: Progressive Web Apps Google Mobile Solutions Consultant Bojan …files.runet-id.com/2018/rif/presentations/20apr.rif18... · 2018-04-20 · Progressive Web Apps Bojan Pavic Mobile](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ec55ec3419eb03a822196e6/html5/thumbnails/4.jpg)
Source: comScore MobiLens, U.S., Age 13+, 3 Month Average Ending June 2017
ZERONumber of apps the average
user installs per month
![Page 5: Progressive Web Apps Google Mobile Solutions Consultant Bojan …files.runet-id.com/2018/rif/presentations/20apr.rif18... · 2018-04-20 · Progressive Web Apps Bojan Pavic Mobile](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ec55ec3419eb03a822196e6/html5/thumbnails/5.jpg)
Capa
bility
Reach
![Page 6: Progressive Web Apps Google Mobile Solutions Consultant Bojan …files.runet-id.com/2018/rif/presentations/20apr.rif18... · 2018-04-20 · Progressive Web Apps Bojan Pavic Mobile](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ec55ec3419eb03a822196e6/html5/thumbnails/6.jpg)
Capa
bility
Reach
![Page 7: Progressive Web Apps Google Mobile Solutions Consultant Bojan …files.runet-id.com/2018/rif/presentations/20apr.rif18... · 2018-04-20 · Progressive Web Apps Bojan Pavic Mobile](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ec55ec3419eb03a822196e6/html5/thumbnails/7.jpg)
Progressive Web Apps Are…
Fast EngagingReliableIntegrated
![Page 8: Progressive Web Apps Google Mobile Solutions Consultant Bojan …files.runet-id.com/2018/rif/presentations/20apr.rif18... · 2018-04-20 · Progressive Web Apps Bojan Pavic Mobile](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ec55ec3419eb03a822196e6/html5/thumbnails/8.jpg)
Fast EngagingReliableIntegrated
![Page 9: Progressive Web Apps Google Mobile Solutions Consultant Bojan …files.runet-id.com/2018/rif/presentations/20apr.rif18... · 2018-04-20 · Progressive Web Apps Bojan Pavic Mobile](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ec55ec3419eb03a822196e6/html5/thumbnails/9.jpg)
Source: DoubleClick - The need for mobile speed, September 2016
53%of users abandon sites that take
longer than 3 seconds to load
![Page 10: Progressive Web Apps Google Mobile Solutions Consultant Bojan …files.runet-id.com/2018/rif/presentations/20apr.rif18... · 2018-04-20 · Progressive Web Apps Bojan Pavic Mobile](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ec55ec3419eb03a822196e6/html5/thumbnails/10.jpg)
Source: DoubleClick - The need for mobile speed, September 2016
19sAverage mobile web page load
on 3G
![Page 11: Progressive Web Apps Google Mobile Solutions Consultant Bojan …files.runet-id.com/2018/rif/presentations/20apr.rif18... · 2018-04-20 · Progressive Web Apps Bojan Pavic Mobile](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ec55ec3419eb03a822196e6/html5/thumbnails/11.jpg)
Integrated EngagingReliableFast
![Page 12: Progressive Web Apps Google Mobile Solutions Consultant Bojan …files.runet-id.com/2018/rif/presentations/20apr.rif18... · 2018-04-20 · Progressive Web Apps Bojan Pavic Mobile](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ec55ec3419eb03a822196e6/html5/thumbnails/12.jpg)
Broken Experience
![Page 13: Progressive Web Apps Google Mobile Solutions Consultant Bojan …files.runet-id.com/2018/rif/presentations/20apr.rif18... · 2018-04-20 · Progressive Web Apps Bojan Pavic Mobile](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ec55ec3419eb03a822196e6/html5/thumbnails/13.jpg)
Web App Manifest<link rel="manifest" href="/manifest.json">
![Page 14: Progressive Web Apps Google Mobile Solutions Consultant Bojan …files.runet-id.com/2018/rif/presentations/20apr.rif18... · 2018-04-20 · Progressive Web Apps Bojan Pavic Mobile](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ec55ec3419eb03a822196e6/html5/thumbnails/14.jpg)
Add to Homescreen
![Page 15: Progressive Web Apps Google Mobile Solutions Consultant Bojan …files.runet-id.com/2018/rif/presentations/20apr.rif18... · 2018-04-20 · Progressive Web Apps Bojan Pavic Mobile](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ec55ec3419eb03a822196e6/html5/thumbnails/15.jpg)
Payment Request API
![Page 16: Progressive Web Apps Google Mobile Solutions Consultant Bojan …files.runet-id.com/2018/rif/presentations/20apr.rif18... · 2018-04-20 · Progressive Web Apps Bojan Pavic Mobile](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ec55ec3419eb03a822196e6/html5/thumbnails/16.jpg)
Reliable EngagingFast Integrated
![Page 17: Progressive Web Apps Google Mobile Solutions Consultant Bojan …files.runet-id.com/2018/rif/presentations/20apr.rif18... · 2018-04-20 · Progressive Web Apps Bojan Pavic Mobile](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ec55ec3419eb03a822196e6/html5/thumbnails/17.jpg)
![Page 18: Progressive Web Apps Google Mobile Solutions Consultant Bojan …files.runet-id.com/2018/rif/presentations/20apr.rif18... · 2018-04-20 · Progressive Web Apps Bojan Pavic Mobile](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ec55ec3419eb03a822196e6/html5/thumbnails/18.jpg)
Lie-Fi
![Page 19: Progressive Web Apps Google Mobile Solutions Consultant Bojan …files.runet-id.com/2018/rif/presentations/20apr.rif18... · 2018-04-20 · Progressive Web Apps Bojan Pavic Mobile](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ec55ec3419eb03a822196e6/html5/thumbnails/19.jpg)
Reliability means never showing the Downasaur
![Page 20: Progressive Web Apps Google Mobile Solutions Consultant Bojan …files.runet-id.com/2018/rif/presentations/20apr.rif18... · 2018-04-20 · Progressive Web Apps Bojan Pavic Mobile](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ec55ec3419eb03a822196e6/html5/thumbnails/20.jpg)
Web server
![Page 21: Progressive Web Apps Google Mobile Solutions Consultant Bojan …files.runet-id.com/2018/rif/presentations/20apr.rif18... · 2018-04-20 · Progressive Web Apps Bojan Pavic Mobile](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ec55ec3419eb03a822196e6/html5/thumbnails/21.jpg)
Service worker
Cache
Web server
![Page 22: Progressive Web Apps Google Mobile Solutions Consultant Bojan …files.runet-id.com/2018/rif/presentations/20apr.rif18... · 2018-04-20 · Progressive Web Apps Bojan Pavic Mobile](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ec55ec3419eb03a822196e6/html5/thumbnails/22.jpg)
EngagingFast ReliableIntegrated
![Page 23: Progressive Web Apps Google Mobile Solutions Consultant Bojan …files.runet-id.com/2018/rif/presentations/20apr.rif18... · 2018-04-20 · Progressive Web Apps Bojan Pavic Mobile](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ec55ec3419eb03a822196e6/html5/thumbnails/23.jpg)
Web Push Notifications
![Page 24: Progressive Web Apps Google Mobile Solutions Consultant Bojan …files.runet-id.com/2018/rif/presentations/20apr.rif18... · 2018-04-20 · Progressive Web Apps Bojan Pavic Mobile](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ec55ec3419eb03a822196e6/html5/thumbnails/24.jpg)
How do I get started?
![Page 25: Progressive Web Apps Google Mobile Solutions Consultant Bojan …files.runet-id.com/2018/rif/presentations/20apr.rif18... · 2018-04-20 · Progressive Web Apps Bojan Pavic Mobile](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ec55ec3419eb03a822196e6/html5/thumbnails/25.jpg)
from the ground up
a single feature
a simple version
![Page 26: Progressive Web Apps Google Mobile Solutions Consultant Bojan …files.runet-id.com/2018/rif/presentations/20apr.rif18... · 2018-04-20 · Progressive Web Apps Bojan Pavic Mobile](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ec55ec3419eb03a822196e6/html5/thumbnails/26.jpg)
Progressive Web Apps Are…
Fast EngagingReliableIntegrated
![Page 27: Progressive Web Apps Google Mobile Solutions Consultant Bojan …files.runet-id.com/2018/rif/presentations/20apr.rif18... · 2018-04-20 · Progressive Web Apps Bojan Pavic Mobile](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ec55ec3419eb03a822196e6/html5/thumbnails/27.jpg)
Thank You!