Question

服务工作者在index.html注册。如果有更新可用，如何显示Toast消息？

据我所知，我有两种可能来展示通知：

从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元素的引用通常在<my-app></my-app>

中命名为index.html

现在，您可以在shell元素和udpate

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

您可以详细了解服务工作者更新通知的工作原理here

如果服务工作者更新可用，Polymer 2.x将显示toast

1 个答案: