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

Question

service-worker 在 index.html 中注册。如果有可用更新，我该如何显示提示信息？

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

从 shell 调用一个函数，但是在我注册 service-worker 的那一刻 shell 还没有加载。
将 paper-toast 导入 index.html，但我不知道它是如何工作的。

有人可以帮我吗？

Answer 1

在 index.html 服务工作者注册的地方使用以下

 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 元素的引用通常在 index.html

中命名为 <my-app></my-app>

现在您可以在 shell 元素和 paper-toast

元素中定义 udpate 方法

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

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

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

polymer

service-worker

progressive-web-apps

polymer-2.x