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

Progressive Web Apps

By Joseph Wynn

Progressive Web Apps

Lightning talk on PWAs.

  • 1,568