polymerservice-workerprogressive-web-appspolymer-2.x

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


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?


Solution

  • 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();
     },