Service Worker 更新事件触发器

Question

按照此链接https://github.com/deanhume/pwa-update-available，我正在尝试实施服务工作者更新，但我面临诸如事件更新未触发之类的问题，我认为这与我的应用程序设计，基本上是一个 SPA，意味着我总是在 index.html 上，它的行为类似于 app-shell，我正在推送内容区域中的内容，具体取决于单击的按钮。

只有其他页面是 login/index.html

app.js 安装/更新 service worker 的内容是这样的：

let newWorker;

          function showUpdateBar() {

            let snackbar = document.getElementById('snackbar');

            snackbar.className = 'show';

          }

          // The click event on the pop up notification

          document.getElementById('reload').addEventListener('click', function(){

            newWorker.postMessage({ action: 'skipWaiting' });

          });

          if ('serviceWorker' in navigator) {

            navigator.serviceWorker.register('/pwa/sw.js').then(reg => {

              console.log( 'ServiceWorker registration successful with scope: ', registration.scope );

              reg.addEventListener('updatefound', () => {

                // A wild service worker has appeared in reg.installing!

                newWorker = reg.installing;

                newWorker.addEventListener('statechange', () => {

                  // Has network.state changed?

                  switch (newWorker.state) {

                    case 'installed':

                      if (navigator.serviceWorker.controller) {

                        // new update available

                        showUpdateBar();

                      }

                      // No update available

                      break;

                  }

                });

              });

            });

            let refreshing;

            navigator.serviceWorker.addEventListener('controllerchange', function () {

              if (refreshing) return;

              window.location.reload();

              refreshing = true;

            });

          }  

所以基本上我面临的问题是触发更新，当我将 v28 等版本号更改为 v29 并重新加载页面时，我收到提示，但即使我注销、登录或退出也没有收到提示并重新打开应用程序。

我该如何解决这个问题？

Answer 1

您只有在浏览器中加载 index.html 时才会触发服务工作者注册例程。这是唯一一次执行代码。除非你定期轮询你的服务器或者可能打开一个 websocket（为此有点昂贵）你不会知道是否有新的 service worker 可用。您可以让用户注册推送通知....为此太头疼了。因此，每隔几小时或几天就汇集一次服务器以进行更新。如果有更新，您可以触发更新例程。我会将轮询逻辑放在实际的 Service Worker 代码中，以使其远离 UI，如果您是 SPA，那么您已经锁定了 UI 线程，哈哈。有很多方法可以给这只猫剥皮，setTimeout(..., {lots of seconds})，当服务工作者从休眠中醒来时，等等。如果您可以发出 HEAD 请求，将网络流量保持在最低水平。如果有更新，您可以向 UI 发布消息以更新 Service Worker。这不是我所说的琐碎代码。我做了类似的事情来保持我缓存的资产是最新的，所以我一直在那里:)