Progressive Web Apps

Performance

Time to first interaction

The average load time for mobile sites is 19 seconds over 3G.

53% of mobile site visits are abandoned if pages take longer than 3 seconds to load.

Repeat customers

Home screen

Push notifications

Up yours, WWW.

Most people don't install apps

People aren't looking for apps

App stores

Barriers

Every step between your users and installing your app loses you 20% of them.

Gabor Cselle

Things to do in Canberra

Go on, go on, go on.

Nothing

Well, there's links

...and searching

...and easy distribution

But apart from that?

Nothing.

Web Apps

Progressive

Time to first interaction

Service Workers!

Getting onto the home screen

Manifests!

SpammingIncreasing Customer Engagement

Push notifications!

1. HTTPS only (localhost counts as secure)

2. Let the browser know about the service worker.

// this is in your main javascript
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(() => {
      console.log("Service worker registered!");
  });
}
						

3. The browser installs the service worker

//in your service worker - sw.js
self.addEventListener('install', function(e) {
  e.waitUntil(
    caches.open(cacheName).then((cache) => {
      return cache.addAll(filesToCache);
    })
  )
});

var cacheName = 'pow-v30';
var filesToCache = [
  "bower_components/jquery/dist/jquery.min.js",
  //other css, etc.
  ...
  "js/index.js",
  "data/speakers.json",
  "speakers.html",
  ...
];

4. The browser triggers an activate event

//in your service-worker - sw.js
self.addEventListener('activate', function(e) {
  e.waitUntil(
    caches.keys().then(keys => {
      // delete any old caches
      ...
    })
  )
});

5. Now we can intercept requests

//in your service worker - sw.js
self.addEventListener('fetch', function(e) {
  e.respondWith(
    caches.open(cacheName).then(cache => {
      return cache.match(e.request).then(response => {
        return response || fetch(e.request);
      });
    })
  )
});

6. Serve our app skeleton from the cache

Don't use my dodgy code.

sw-precache (https://github.com/GoogleChrome/sw-precache)

sw-toolbox (https://googlechrome.github.io/sw-toolbox/)

Makes your app installable.

{
  "short_name": "POW! 2016",
  "start_url": "index.html",
  "display": "standalone",
  "icons": [{
      "src": "images/logo.png",
      "sizes": "192x192",
      "type": "image/png"
    }]
}
						

When do you get to install?

• HTTPS + Service Worker
• Manifest with "short_name", "start_url", and an icon
• User visits at least twice, with at least 5 mins between

Annoying?

beforeinstallprompt event

1. Ask for permission

//in your main javascript
navigator.serviceWorker.ready.then(reg => {
  Notification.requestPermission().then(() => {
    reg.pushManager.subscribe({
      userVisibleOnly: true
    }).then(sub => {
      // PushSubscription
    })
  })
})

2. Send a message

//server-side code
const push = require('web-push');
push.sendNotification(
  'https://updates.push.services.mozilla....',
  { userPublicKey: '...',
    userAuth: '...',
    payload: '...' }
).then(() => {
  console.log('Message sent.');
});

3. Receive the message

//meanwhile, back in our service worker
self.addEventListener('push', function(e) {
  e.waitUntil(
    self.registration.showNotification(
      "Schedule change",
      { body: e.body.json().message, icon: '...' }
    )
  )
});

Complications

Browser support

Android - two thumbs up

• Service-workers ✓
• Manifest ✓
• Push notifications ✓

iOS

• Service-workers ✗
• Manifest ✗
• Push notifications ✗

PWAs bring some benefits of native apps

• Time to first interaction - Service Workers!
• Install to home screen - Manifests!
• User engagement - Push Notifications!

But they don't work on iOS (yet)