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

Twitter

@ChromiumDev

Proprietary + Confidential

Ido Green@greenido

https://greenido.wordpress.com/



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


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


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


● 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


The Progressive Web App - Examples

https://noter-1.firebaseapp.com/https://voice-memos.appspot.com

https://noter-1.firebaseapp.com/


https://voice-memos.appspot.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

https://developers.google.com/web/showcase/case-study/flipkart?hl=en

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!

Progressive Web App Code Lab


Code Time!1. PWA - g.co/codelabs/pwa2. Push Notifications - goo.gl/oFwPaV

https://g.co/codelabs/pwa

https://goo.gl/oFwPaV

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


Enabling app-like capabilities

Service Worker

● Client-side proxy written in JavaScript● Access device capabilities to allow your

site to be “app like”


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" }


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


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

https://greenido.wordpress.com/2016/03/29/progressive-web-apps-noter/


Let’s build it!

g.co/codelabs/pwa

Questions? Ask!

THANK YOU!

Ido Green@greenido




MiscHelpful links

● https://www.chromium.org/blink/serviceworker/service-worker-faq

● https://www.chromium.org/blink/serviceworker/getting-started

https://www.chromium.org/blink/serviceworker/service-worker-faq

https://www.chromium.org/blink/serviceworker/service-worker-faq

https://www.chromium.org/blink/serviceworker/getting-started

https://www.chromium.org/blink/serviceworker/getting-started

Coffee Break3:30pm

voice-memos.appspot.com


Let’s do better.


Final thoughts