Chris Wilson: Progressive Web Apps

Chris Wilson@cwilso

Google

Progressive Web Apps

vs.

Source: comScore Mobile Metrix, U.S., Age 18+, June 2015

13% 87%

Mobile web Apps

80%OF TIME SPENT IS IN USERS’ TOP 3 APPS


ZERONUMBER OF APPS

AVERAGE USER INSTALLS PER MONTH


Capa

bilit

y

Reach

Capa

bilit

y

Reach

Capa

bilit

y

Reach

are (a new level of) caring about the quality of your user experience

Progressive Web Apps

Reliable

User experiences need to be...

Lie-Fi

Reliability means never showing the Downasaur

Reliable Fast


of users abandon sites that take longer than 3 seconds to load40%

Reliable Fast Engaging


Full screen, theming,

orientation, etc.

Push notifications

Immersive Notifications

Engaging

Auto-adding to Home Screen

Home Screen

https://wapo.com/pwahttps://wapo.com/pwa

`80ms article page load time in the Progressive Web App

Poynter article

http://www.poynter.org/2016/with-lessons-from-google-the-washington-post-has-brought-its-page-load-speed-down-to-milliseconds/413297/

Reliable Fast Engaging

Progressive Web Apps are…

How do you get started?

Focus on the User

Stay Secure

`

HTTPS: Secure connection between site and users

The Cost of HTTPS

Certificate Search Ranking

Let’s Encrypt is a trademark of the Internet Security Research Group.

The Cost of HTTPS

Certificate Search Ranking

Search Ranking Guidance

bit.ly/https-migration

Build a Service Worker

Web server

Service worker

Client side proxy (written in JavaScript)

Cache

Web server

Service Worker Life Cycle

• Adds app-like lifecycle to a page• Wakes up only when the OS says• Only responds to system events

Activated Error

Idle

Active Terminated

Install

Register



Activated Error

Idle

Active Terminated

Install

Register



Activated Error

Idle

Active Terminated

Install

Register



Activated Error

Idle

Active Terminated

Install

Register

is for the SECOND load.Service Worker

Implementing a simple Service Worker

Register the Service Worker

if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/service-worker.js') .then(function(reg) { console.log('Service Worker Registered', reg); }) .catch(function(err) { console.log('Error registering Service Worker', err); });}

Register the Service Worker

if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/service-worker.js') .then(function(reg) { console.log('Service Worker Registered', reg); }) .catch(function(err) { console.log('Error registering Service Worker', err); });}

Activated Error

Idle

Active Terminated

Install

Register

Pre-fetch the App Resources

Pre-fetch the App Resourcesvar cacheName = 'app-shell-cache-v1';var filesToCache = ['/', '/index.html', ...];

self.addEventListener('install', function(event) { event.waitUntil( caches.open(cacheName).then(function(cache) { return cache.addAll(filesToCache); }).then(function() { return self.skipWaiting(); }) );});

Pre-fetch the App Resourcesvar cacheName = 'app-shell-cache-v1';var filesToCache = ['/', '/index.html', ...];

self.addEventListener('install', function(event) { event.waitUntil( caches.open(cacheName).then(function(cache) { return cache.addAll(filesToCache); }).then(function() { return self.skipWaiting(); }) );});

Activated Error

Idle

Active Terminated

Install

Register

Not Done Yet...

Add a fetch Event Handler

self.addEventListener('fetch', function(e) { e.respondWith( caches.match(e.request).then(function(response) { return response || fetch(e.request); }) );});







Activated Error

Idle

Active Terminated

Install

Register

Ready to Go!

controlYOU ARE IN

Caching strategies galore!

Engage Your Users

Add to Home Screen

Add To Home ScreenWas Broken


Required user interaction Buried deep in menus



Where would it start?Dependent on bookmark



Where would it start?Dependent on bookmark

Would it work offline?Users didn't expect offline


<link rel="manifest" href="/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": "#000000", "theme_color": "#000000"}

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": "#000000", "theme_color": "#000000"}




`

Good, but what about prompt to

install?

A Promise to the User

Consistent Experience

Works Offline

The User is Engaged

`

Web Push Notifications

`

Web Push Notifications

The browser doesn’t need to be open!

`

`

38% open rate

9xmore conversions on

previously abandoned carts

Built on Service Workers

example.com

/* ServiceWorker.js */

onfetch = 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 /content.json HTTP/1.1HOST example.com

GET /content.json HTTP/1.1HOST example.com

GET /app.html HTTP/1.1HOST example.com

http://example.com

Built on Service Workers

/* ServiceWorker.js */

onpush = function(event) { var data = event.data.json(); var t = data.title; var opt = { body: data.body, icon: data.icon, tag: data.tag }; self.registration .showNotification(t, opt);};

End Point

example.com

Stay Secure

Use a Service Worker

Engage Your Users

`

`

2x more

page views

74% increase in time spent

`

2x more

page views

74% increase in time spent

82% more conversions on iOS

is progressive.Progressive Web App

not the tech.Focus on the user

Go build!

meow

Chris Wilson: Progressive Web Apps

Technology