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