Service Worker 更新事件触发器

Question

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

只有其他页面是登录/索引。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;
            });
          }  

和 sw.js 文件内容是这样的：

var cacheName = 'v28';

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(cacheName)
      .then(cache => cache.addAll([
        "/pwa/index.html",
        "/pwa/main.css",
        "/pwa/js/app/app.js",
        "/pwa/js/app/libs/api.js",
        '/pwa/query.js',
        '/pwa/js/libs/localforage.min.js',
        '/pwa/js/libs/utils.js'
      ]))
  );
});



self.addEventListener('message', function (event) {
  if (event.data.action === 'skipWaiting') {
    self.skipWaiting();
  }
});

// Allow sw to control of current page
self.addEventListener('activate', event => {
  console.log('Activating new service worker...');

  const cacheWhitelist = [cacheName];

  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cacheName => {
          if (cacheWhitelist.indexOf(cacheName) === -1) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

self.addEventListener('fetch', function (event) {
  event.respondWith(
    caches.match(event.request)
      .then(function (response) {
        if (response) {
          return response;
        }
        return fetch(event.request);
      })
  );
});

index.html 的部分内容：

<div id="snackbar">A new version of this app is available. Click <a id="reload">here</a> to update.</div>

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

我该如何解决这个问题？

注意：PWA 是我的渐进式应用程序文件夹，我使用 php/yii2 作为后端，而不是使用节点服务器或其他 JS 框架。

Answer 1

仅当您在浏览器中加载 index.html 时才会触发服务工作者注册例程。 这是代码执行的唯一时间。

除非您定期轮询您的服务器或可能打开 websocket（为此有点贵），否则您不会知道是否有新的 service worker 可用。 你可以让用户注册推送通知……这太让人头疼了。

因此，每隔几个小时或几天将服务器汇集一次以进行更新。

如果有更新，您可以触发更新例程。

我会将轮询逻辑放在实际的服务工作者代码中以使其远离 UI，如果您是 SPA，那么您已经足够锁定 UI 线程了。

有很多方法可以给这只猫剥皮，setTimeout(..., {lots of seconds})，当服务工作者从休眠中醒来时等等。

如果您可以发出 HEAD 请求，将网络流量保持在最低限度。

如果有更新，您可以向 UI 发布消息以更新 service worker。

这不是我所说的琐碎代码。 我做了类似的事情来保持我的缓存资产是最新的，所以我一直在那里:)