Polymer 2.x show toast if service-worker update available

Question

The service-worker is registered in index.html. How do I show a toast message if an update is available?

As far as I can see I have two possibilities to show a notification:

1. Call a function from the shell, but at the moment when I register the service-worker the shell is not yet loaded.

2. Import paper-toast into index.html, but I do not know how it would work.

Could someone help me?

Answer 1

in index.html where the service worker is registered use the following

 if ('serviceWorker' in navigator) {
  window.addEventListener('load', function () {
    navigator.serviceWorker.register('service-worker.js').then(function (registration) {

      var app = document.querySelector('#app');
      if (registration.waiting) {
        app.update(registration);
        return;
      }

      if (registration.installing) {
        registration.installing.addEventListener('statechange', function () {
          app.update(registration);
        });
        return;
      }

      registration.addEventListener('updatefound', function () {
        app.update(registration);
      });

      console.info('ServiceWorker registration successful with scope: ', registration.scope);
    }, function (err) {
      console.info('ServiceWorker registration failed: ', err);
    });;
  });
}

Notice that app is variable which holds a reference to your shell element usually named <my-app></my-app> in index.html

Now you can define the udpate method inside your shell element and the paper-toast

<paper-toast id="updateToast" duration="0" text="New Update Is Here :)">
  <paper-button onclick="window.location.reload(true)">
        Update
  </paper-button>
  <paper-button onclick="updateToast.toggle()">
      Cancel
  </paper-button>
</paper-toast>

 // update function
 update: function (worker) {
    this.$.updateToast.show();
 },