Progressive Web Apps TLV
57
Progressive Web Apps Tel Aviv 2016 g.co/progressivewebapps
Transcript of Progressive Web Apps TLV
Progressive Web AppsTel Aviv
2016
g.co/progressivewebapps
Code of Conductgoo.gl/O96sJg
SlackJoin
chromiumdev-slack.herokuapp.com
Loginchromiumdev.slack.com
@ChromiumDev
Proprietary + Confidential
Ido Green@greenido
Proprietary + Confidential
Progressive Web AppsMobile has natively come to the Web
The Big Bang of Computing
<!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>
Ajax was born to run desktop apps on the Web
How did the Web beat native applications on the desktop?
Distribution Is The Hardest Problem In Software
flickr.com/photos/blakespot/
The Mobile Explosion
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
Confidential & Proprietary
Access to the back catalog is great, but you want to use the new affordances and power
What if the Web evolved those capabilities, just as it did with
Ajax?
What's Missing?
1. Home Screen Access 2. Push Notifications 3. Offline
1. Home screen Access
Less typing, more tapping.
2. Push Notifications
How can we re-engage users at the right time?
1. Works If Browser Closed
2. Needs Permission
3. Offline That Works™
It isn't an app if it doesn't start when you tap.
example.com
GET /app.html HTTP/1.1HOST example.com...
HTTP/1.1 200 OKDate: Thu, 19 Feb 2015 05:21:56 GMT...
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......
Service Workers Are Network Progressive
Enhancement
A Programmable Network Proxy under your control.
Service Workers are to Progressive Web Apps as
XMLHttpRequest was to AjaxThe foundational capability that was a tipping point for innovation
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
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
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
Confidential & Proprietary
The Progressive Web App - Examples
https://noter-1.firebaseapp.com/https://voice-memos.appspot.com
e-commerce
● 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
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
Kill Your Dinosaur!
Code Time!1. PWA - g.co/codelabs/pwa2. Push Notifications - goo.gl/oFwPaV
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
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
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”
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" }
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
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
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Let’s build it!
g.co/codelabs/pwa
Questions? Ask!
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
Coffee Break3:30pm
voice-memos.appspot.com
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Let’s do better.
Proprietary + Confidential
Final thoughts
