[PWA] Show Notifications when a Service Worker is Installed or Updated

Service Workers get installed and activated in the background, but until we reload the page they don’t take full control in the app. Showing a notification is a good way to let the user know that there is a new version of the app.

In this lesson I’ll show you how you can show a notification when a new service worker is installed and activated.

 

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js').then(reg => {
    reg.onupdatefound = () => {
      const sw = reg.installing;

      sw.onstatechange = () => {
        if (sw.state === 'installed') {
          if (navigator.serviceWorker.controller) {
            app.message = 'New version is available. Reload to activate it.'
            app.show=true
          } else {
            app.message = 'Content is now available offline'
            app.show=true
          }
        }
      }
    }
  })
}