Show a ServiceWorker Installed Popup

serviceworker-registration.js

// Display a Information about ServiceWorker Installation being Completed.
// An alternative and more battle tested way to do the same thing is found on Google I/O 2016 PWA (IOWA)
// https://github.com/GoogleChrome/ioweb2016/blob/8cfa27261f9d07fe8a5bb7d228bd3f35dfc9a91e/app/scripts/helper/service-worker-registration.js#L34-L46

/// One way to register the Caching complete event for the service workers
/// I am using this in my application and this seems to be working
if ('serviceWorker' in navigator) {
  const initialController = navigator.serviceWorker.controller;
  navigator.serviceWorker.register('./serviceWorker.js').then(registration => {
    if (registration.installing) {
      var serviceWorker = registration.installing;
      serviceWorker.addEventListener('statechange', function (event) {
        if (event.target.state === 'installed' && !initialController) {
          showPopup();
        }
      });
    }
  }); 
}

@jakearchibald This also seems to be working, above approaches, are perfect for a more fine grained control, but this seems simpler

navigator.serviceWorker.ready.then(registration => {
  if (!navigator.serviceWorker.controller) {
    showPopup();
  }
});