如果 service-worker 更新可用，Polymer 2.x 会显示 toast

Question

service-worker 已在 index.html 中注册。如果有可用更新，如何显示 Toast 消息？

据我所知，我有两种显示通知的可能性:

1. 从 shell 调用函数，但在我注册 service-worker 时，shell 尚未加载。

2. 将 paper-toast 导入到 index.html 中，但我不知道它会如何工作。

有人可以帮助我吗？

Answer 1

在 index.html在注册 Service Worker 的地方使用以下

 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);
    });;
  });
}

请注意，app 是变量，它保存对 shell 元素的引用 通常命名为<my-app></my-app>在index.html

现在您可以定义udpate shell 元素中的方法和 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();
 },