sw-update-toast.html

<link rel="import" href="../polymer/polymer-element.html">

<link rel="import" href="../paper-toast/paper-toast.html">

<dom-module id="sw-update-toast">
  <template>
    <style>
      span {
        margin-right: 1em;
      }
      a {
        color: var(--primary-color, orange);
        text-decoration: none;
      }
    </style>
    <paper-toast id="toast" duration="[[ duration ]]" opened="[[ opened ]]">
      <span>[[ message ]]</span>
      <a href on-click="_reload">[[ buttonLabel ]]</a>
    </paper-toast>
  </template>

  <script>
    /**
     * # Service worker update toast
     * `<sw-update-toast>` displays a toast requesting the user to reload the page when a source code update is available.
     *
     * ## Styling
     *   * `--primary-color`,  link color defaults to orange
     *
     * @customElement
     * @polymer
     * @demo demo/index.html
     *
     */
    class SWUpdateToast extends Polymer.Element {
      static get is() { return 'sw-update-toast'; }

      static get properties() {
        return {
          /** message to display */
          message: {
            type: String,
            value: "Site update available!",
          },

          /** label for reload button */
          buttonLabel: {
            type: String,
            value: "Reload",
          },
          /** duration the toast should be shown, default 0 to persist. */
          duration: {
            type: Number,
            value: 0,
          },
          /** open the toast */
          opened: {
            type: Boolean,
            value: false,
          }
        };
      }

      ready() {
        super.ready();

        if ('serviceWorker' in navigator) {
          window.addEventListener('load', () => {
            navigator.serviceWorker.getRegistration().then((registration) => {
              if (registration) {
                registration.addEventListener('updatefound', () => {
                  this.$.toast.open();
                });
              }
            });
          });
        }
      }

      _reload() {
        window.location.reload();
      }
    }

    customElements.define(SWUpdateToast.is, SWUpdateToast);
  </script>
</dom-module>