Progressive Web Apps

What are they?

  • Web apps on the home screen
  • Launched as standalone (full-screen) apps
  • Hook into push notifications
  • Better offline experience
  • Resilient to connection issues

Requirements

  • Has a manifest file
  • Served over HTTPS
  • Have a registered service worker

Manifest file

{
  "short_name": "BBC News",
  "name": "BBC News",
  "icons": [
    {
      "src": "launcher-icon-2x.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "launcher-icon-3x.png",
      "sizes": "144x144",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "orientation": "landscape"
}
<link rel="manifest" href="/manifest.json">

Service workers

  • Responds to events including network requests
  • Run in the background, separate from page
  • Only wakes up long enough to process events
  • Intercept & cache network requests
  • Construct arbitrary responses
  • Handle push notifications
this.addEventListener('install', event => {
  event.waitUntil(
    caches.open('v1').then(cache => {
      return cache.addAll([
        '/news/blogs-news-from-elsewhere-36586189',
        '/news/blogs-news-from-elsewhere-36561197',
        '/news/world-us-canada-36541261',

        '/styles/core.css',
        '/styles/enhanced.css',

        '/js/main.js'
      ])
    })
  )
})
this.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => response || fetch(event.request))
  )
})
this.addEventListener('push', event => {  
  console.log('Look mum, push notifications!', event)

  event.waitUntil(  
    this.registration.showNotification('BREAKING NEWS: Sheep', {  
      body: 'BBC News is receiving reports of sheep.',  
      icon: '/images/notifications/emergency-sheep.png',  
      tag: 'you-can-tag-notifications'  
    })  
  )  
})

But we have a native app!

Native apps are an investment

  • Find the app
  • Decide you like it
  • Download it
  • Open it
  • Put it on your home screen

PWAs are an upsell

  • You're already on the site
  • Decide you like it
  • Put it on your home screen

Offline experience

Resilience

Performance

Spamming push notifications

Better serving the user

(Gently) improving engagement