progressive web apps tlv
TRANSCRIPT
![Page 1: Progressive Web Apps TLV](https://reader031.vdocument.in/reader031/viewer/2022021502/58f9b371760da3da068bd630/html5/thumbnails/1.jpg)
Progressive Web AppsTel Aviv
2016
g.co/progressivewebapps
![Page 2: Progressive Web Apps TLV](https://reader031.vdocument.in/reader031/viewer/2022021502/58f9b371760da3da068bd630/html5/thumbnails/2.jpg)
Code of Conductgoo.gl/O96sJg
![Page 3: Progressive Web Apps TLV](https://reader031.vdocument.in/reader031/viewer/2022021502/58f9b371760da3da068bd630/html5/thumbnails/3.jpg)
SlackJoin
chromiumdev-slack.herokuapp.com
Loginchromiumdev.slack.com
![Page 4: Progressive Web Apps TLV](https://reader031.vdocument.in/reader031/viewer/2022021502/58f9b371760da3da068bd630/html5/thumbnails/4.jpg)
@ChromiumDev
![Page 5: Progressive Web Apps TLV](https://reader031.vdocument.in/reader031/viewer/2022021502/58f9b371760da3da068bd630/html5/thumbnails/5.jpg)
Proprietary + Confidential
Ido Green@greenido
![Page 6: Progressive Web Apps TLV](https://reader031.vdocument.in/reader031/viewer/2022021502/58f9b371760da3da068bd630/html5/thumbnails/6.jpg)
Proprietary + Confidential
Progressive Web AppsMobile has natively come to the Web
![Page 7: Progressive Web Apps TLV](https://reader031.vdocument.in/reader031/viewer/2022021502/58f9b371760da3da068bd630/html5/thumbnails/7.jpg)
The Big Bang of Computing
![Page 8: Progressive Web Apps TLV](https://reader031.vdocument.in/reader031/viewer/2022021502/58f9b371760da3da068bd630/html5/thumbnails/8.jpg)
![Page 9: Progressive Web Apps TLV](https://reader031.vdocument.in/reader031/viewer/2022021502/58f9b371760da3da068bd630/html5/thumbnails/9.jpg)
![Page 10: Progressive Web Apps TLV](https://reader031.vdocument.in/reader031/viewer/2022021502/58f9b371760da3da068bd630/html5/thumbnails/10.jpg)
![Page 11: Progressive Web Apps TLV](https://reader031.vdocument.in/reader031/viewer/2022021502/58f9b371760da3da068bd630/html5/thumbnails/11.jpg)
![Page 12: Progressive Web Apps TLV](https://reader031.vdocument.in/reader031/viewer/2022021502/58f9b371760da3da068bd630/html5/thumbnails/12.jpg)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"><HTML> <HEAD> <TITLE>Bach's home page</TITLE> <STYLE type="text/css"> h1 { color: red } </STYLE> </HEAD> <BODY> <H1>Bach's home page</H1> <P>Johann Sebastian Bach was a prolific composer. </BODY></HTML>
![Page 13: Progressive Web Apps TLV](https://reader031.vdocument.in/reader031/viewer/2022021502/58f9b371760da3da068bd630/html5/thumbnails/13.jpg)
![Page 14: Progressive Web Apps TLV](https://reader031.vdocument.in/reader031/viewer/2022021502/58f9b371760da3da068bd630/html5/thumbnails/14.jpg)
Ajax was born to run desktop apps on the Web
![Page 15: Progressive Web Apps TLV](https://reader031.vdocument.in/reader031/viewer/2022021502/58f9b371760da3da068bd630/html5/thumbnails/15.jpg)
![Page 16: Progressive Web Apps TLV](https://reader031.vdocument.in/reader031/viewer/2022021502/58f9b371760da3da068bd630/html5/thumbnails/16.jpg)
How did the Web beat native applications on the desktop?
![Page 17: Progressive Web Apps TLV](https://reader031.vdocument.in/reader031/viewer/2022021502/58f9b371760da3da068bd630/html5/thumbnails/17.jpg)
Distribution Is The Hardest Problem In Software
flickr.com/photos/blakespot/
![Page 18: Progressive Web Apps TLV](https://reader031.vdocument.in/reader031/viewer/2022021502/58f9b371760da3da068bd630/html5/thumbnails/18.jpg)
![Page 19: Progressive Web Apps TLV](https://reader031.vdocument.in/reader031/viewer/2022021502/58f9b371760da3da068bd630/html5/thumbnails/19.jpg)
The Mobile Explosion
![Page 20: Progressive Web Apps TLV](https://reader031.vdocument.in/reader031/viewer/2022021502/58f9b371760da3da068bd630/html5/thumbnails/20.jpg)
Confidential & Proprietary
● Runs the “desktop Web”
● Pinch and zoom, Pan, etc
● Hitchhikers guide to the galaxy is in
your pocket!
The Mobile Internet came when it brought the Web
![Page 21: Progressive Web Apps TLV](https://reader031.vdocument.in/reader031/viewer/2022021502/58f9b371760da3da068bd630/html5/thumbnails/21.jpg)
Confidential & Proprietary
Access to the back catalog is great, but you want to use the new affordances and power
![Page 22: Progressive Web Apps TLV](https://reader031.vdocument.in/reader031/viewer/2022021502/58f9b371760da3da068bd630/html5/thumbnails/22.jpg)
What if the Web evolved those capabilities, just as it did with
Ajax?
![Page 23: Progressive Web Apps TLV](https://reader031.vdocument.in/reader031/viewer/2022021502/58f9b371760da3da068bd630/html5/thumbnails/23.jpg)
What's Missing?
1. Home Screen Access 2. Push Notifications 3. Offline
![Page 24: Progressive Web Apps TLV](https://reader031.vdocument.in/reader031/viewer/2022021502/58f9b371760da3da068bd630/html5/thumbnails/24.jpg)
1. Home screen Access
Less typing, more tapping.
![Page 25: Progressive Web Apps TLV](https://reader031.vdocument.in/reader031/viewer/2022021502/58f9b371760da3da068bd630/html5/thumbnails/25.jpg)
![Page 26: Progressive Web Apps TLV](https://reader031.vdocument.in/reader031/viewer/2022021502/58f9b371760da3da068bd630/html5/thumbnails/26.jpg)
2. Push Notifications
How can we re-engage users at the right time?
![Page 27: Progressive Web Apps TLV](https://reader031.vdocument.in/reader031/viewer/2022021502/58f9b371760da3da068bd630/html5/thumbnails/27.jpg)
1. Works If Browser Closed
2. Needs Permission
![Page 28: Progressive Web Apps TLV](https://reader031.vdocument.in/reader031/viewer/2022021502/58f9b371760da3da068bd630/html5/thumbnails/28.jpg)
3. Offline That Works™
It isn't an app if it doesn't start when you tap.
![Page 29: Progressive Web Apps TLV](https://reader031.vdocument.in/reader031/viewer/2022021502/58f9b371760da3da068bd630/html5/thumbnails/29.jpg)
![Page 30: Progressive Web Apps TLV](https://reader031.vdocument.in/reader031/viewer/2022021502/58f9b371760da3da068bd630/html5/thumbnails/30.jpg)
example.com
GET /app.html HTTP/1.1HOST example.com...
HTTP/1.1 200 OKDate: Thu, 19 Feb 2015 05:21:56 GMT...
![Page 31: Progressive Web Apps TLV](https://reader031.vdocument.in/reader031/viewer/2022021502/58f9b371760da3da068bd630/html5/thumbnails/31.jpg)
example.com
// sw.jsonfetch = function(e) { if(e.request.url == "app.html") { e.respondWith( caches.match(e.request) ); }
if(e.request.url == "content.json") { // go to the network for updates, // meanwhile, use cached content fetch(...).then(function(r) { r.asJSON().then(function(json) { e.client.postMessage(json); }); }); }};
GET /app.html HTTP/1.1HOST example.com...
GET /content.json HTTP/1.1HOST example.com...
GET /content.json HTTP/1.1HOST example.com...
HTTP/1.1 200 OKDate: Thu, 19 Feb 2015......
![Page 32: Progressive Web Apps TLV](https://reader031.vdocument.in/reader031/viewer/2022021502/58f9b371760da3da068bd630/html5/thumbnails/32.jpg)
Service Workers Are Network Progressive
Enhancement
A Programmable Network Proxy under your control.
![Page 33: Progressive Web Apps TLV](https://reader031.vdocument.in/reader031/viewer/2022021502/58f9b371760da3da068bd630/html5/thumbnails/33.jpg)
Service Workers are to Progressive Web Apps as
XMLHttpRequest was to AjaxThe foundational capability that was a tipping point for innovation
![Page 34: Progressive Web Apps TLV](https://reader031.vdocument.in/reader031/viewer/2022021502/58f9b371760da3da068bd630/html5/thumbnails/34.jpg)
![Page 35: Progressive Web Apps TLV](https://reader031.vdocument.in/reader031/viewer/2022021502/58f9b371760da3da068bd630/html5/thumbnails/35.jpg)
Impact of speed on bounce rates
Source: SOASTA; September, 2015
2.4 2.7 3.0 3.3 3.6 3.9 4.2 4.5 4.8 5.1 5.4 5.7 6.0 6.3 6.6 6.9 7.2 7.5 7.8 8.1 8.4 8.7 9.0 9.3 9.6 9.9
180,000
140,000
100,000
60,000
0
20,000
58
45
32
19
0
6
Sess
ions
Load time (in seconds)
Boun
ce ra
te (%
)
Sessions Bounce rate
13%bounce
rate
20%bounce
rate
58%bounce
rate
![Page 36: Progressive Web Apps TLV](https://reader031.vdocument.in/reader031/viewer/2022021502/58f9b371760da3da068bd630/html5/thumbnails/36.jpg)
Confidential & Proprietary
RAIL: Instant loading and smooth navigation
● For first visitors, load pages in <10s on 3G
net
○ Aspirational goal: <3s to first paint
● For repeat visitors, loading of page in <500
ms
● Always scrolling at 60 frames/second
● Content shouldn’t jump as images are loaded
![Page 37: Progressive Web Apps TLV](https://reader031.vdocument.in/reader031/viewer/2022021502/58f9b371760da3da068bd630/html5/thumbnails/37.jpg)
Confidential & Proprietary
● Reliable: Fast loading, offline and on flaky networks
● Fast: Smooth animation, scrolling and nav● Engaging and integrated
○ On the home screen, no URL bar, icons, splash
○ Re-engaging with push notifications
● Consistent experience across browsers(still in progress, though)
The Progressive Web App Experience
![Page 38: Progressive Web Apps TLV](https://reader031.vdocument.in/reader031/viewer/2022021502/58f9b371760da3da068bd630/html5/thumbnails/38.jpg)
Confidential & Proprietary
The Progressive Web App - Examples
https://noter-1.firebaseapp.com/https://voice-memos.appspot.com
![Page 39: Progressive Web Apps TLV](https://reader031.vdocument.in/reader031/viewer/2022021502/58f9b371760da3da068bd630/html5/thumbnails/39.jpg)
e-commerce
![Page 40: Progressive Web Apps TLV](https://reader031.vdocument.in/reader031/viewer/2022021502/58f9b371760da3da068bd630/html5/thumbnails/40.jpg)
● Users time on Flipkart lite vs. previous
experience: 3.5 minutes vs 70 seconds.
● 3x more time spent on site
● 40% higher re-engagement rate
● 70% greater conversion rate among those
arriving via Add to Homescreen
● 3x lower data usage
● Read more on Flipkart case study
![Page 41: Progressive Web Apps TLV](https://reader031.vdocument.in/reader031/viewer/2022021502/58f9b371760da3da068bd630/html5/thumbnails/41.jpg)
26%increase in average spend
per visit by members arrivingvia a push notification
72%increase in time spent for users visiting via a push notification
+50%repeat visits within 3 months
![Page 42: Progressive Web Apps TLV](https://reader031.vdocument.in/reader031/viewer/2022021502/58f9b371760da3da068bd630/html5/thumbnails/42.jpg)
Kill Your Dinosaur!
![Page 44: Progressive Web Apps TLV](https://reader031.vdocument.in/reader031/viewer/2022021502/58f9b371760da3da068bd630/html5/thumbnails/44.jpg)
Code Time!1. PWA - g.co/codelabs/pwa2. Push Notifications - goo.gl/oFwPaV
![Page 45: Progressive Web Apps TLV](https://reader031.vdocument.in/reader031/viewer/2022021502/58f9b371760da3da068bd630/html5/thumbnails/45.jpg)
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
![Page 46: Progressive Web Apps TLV](https://reader031.vdocument.in/reader031/viewer/2022021502/58f9b371760da3da068bd630/html5/thumbnails/46.jpg)
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Enter Progressive Web Apps● Fast loading
● One click away from accessing content
● Smooth animations and navigations
● Re-engages with push notifications
● Good experience on flaky network connections
● Consistent experience across browsers
![Page 47: Progressive Web Apps TLV](https://reader031.vdocument.in/reader031/viewer/2022021502/58f9b371760da3da068bd630/html5/thumbnails/47.jpg)
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Enabling app-like capabilities
Service Worker
● Client-side proxy written in JavaScript● Access device capabilities to allow your
site to be “app like”
![Page 48: Progressive Web Apps TLV](https://reader031.vdocument.in/reader031/viewer/2022021502/58f9b371760da3da068bd630/html5/thumbnails/48.jpg)
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Enabling app-like capabilities
Service Worker
● Client-side proxy written in JavaScript● Access device capabilities to allow your
site to be “app like”
Web App Manifest
● Rich presence on user’s Android homescreen
● Launch in full-screen mode on Android ● Control the screen orientation ● Define “splash screen” launch, theme
color for site
{ "short_name": "My Cool App", "name": "My Totally Cool Application", "icons": [ {"src": "launcher-icon-3x.png",
"sizes": "192x192", "type": "image/png"}],
"start_url": "index.html", "display": "standalone", "background_color" : "#aeaeae", "theme_color" : "#aeaeae", "orientation" : "landscape" }
![Page 49: Progressive Web Apps TLV](https://reader031.vdocument.in/reader031/viewer/2022021502/58f9b371760da3da068bd630/html5/thumbnails/49.jpg)
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Add to Homescreen & Full Screen● User who visits 2x in a
within five minutes will be prompted with “add to homescreen”
● One tap to add to homescreen
● Opens full screen - no URL bar
![Page 50: Progressive Web Apps TLV](https://reader031.vdocument.in/reader031/viewer/2022021502/58f9b371760da3da068bd630/html5/thumbnails/50.jpg)
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
A few tips before we start...
● Chapters 6 & 7 will take the longest● Service Workers - Tips
○ Don't forget to change the cacheName○ Use an incognito window to ensure a fresh start○ Keep only one tab open at a time○ chrome://serviceworker-internals & DevTools are your
new best friends○ Read More tips on Noter PWA Example
![Page 51: Progressive Web Apps TLV](https://reader031.vdocument.in/reader031/viewer/2022021502/58f9b371760da3da068bd630/html5/thumbnails/51.jpg)
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Let’s build it!
g.co/codelabs/pwa
Questions? Ask!
![Page 53: Progressive Web Apps TLV](https://reader031.vdocument.in/reader031/viewer/2022021502/58f9b371760da3da068bd630/html5/thumbnails/53.jpg)
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
MiscHelpful links
● https://www.chromium.org/blink/serviceworker/service-worker-faq
● https://www.chromium.org/blink/serviceworker/getting-started
![Page 54: Progressive Web Apps TLV](https://reader031.vdocument.in/reader031/viewer/2022021502/58f9b371760da3da068bd630/html5/thumbnails/54.jpg)
Coffee Break3:30pm
![Page 55: Progressive Web Apps TLV](https://reader031.vdocument.in/reader031/viewer/2022021502/58f9b371760da3da068bd630/html5/thumbnails/55.jpg)
voice-memos.appspot.com
![Page 56: Progressive Web Apps TLV](https://reader031.vdocument.in/reader031/viewer/2022021502/58f9b371760da3da068bd630/html5/thumbnails/56.jpg)
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Let’s do better.
![Page 57: Progressive Web Apps TLV](https://reader031.vdocument.in/reader031/viewer/2022021502/58f9b371760da3da068bd630/html5/thumbnails/57.jpg)
Proprietary + Confidential
Final thoughts