javascript - 如何: ServiceWorker check if ready to update

Question

我要实现的目标:

• 使用加载器/微调器渲染页面

• 如果 service-worker.js 已注册并处于事件状态，则检查更新

  • 如果没有更新，则移除 loader
  • 如果 updatefound 并且安装了新版本，则重新加载页面
• 否则注册service-worker.js
  • 当 updatefound 时，意味着安装了新的，移除 loader

我正在使用 sw-precache 模块来生成 service-worker.js 和以下注册码:

window.addEventListener('load', function() {

  // show loader
  addLoader();

  navigator.serviceWorker.register('service-worker.js')
    .then(function(swRegistration) {

      // react to changes in `service-worker.js`
      swRegistration.onupdatefound = function() {
        var installingWorker = swRegistration.installing;
        installingWorker.onstatechange = function() {
          if(installingWorker.state === 'installed' && navigator.serviceWorker.controller){

            // updated content installed
            window.location.reload();
          } else if (installingWorker.state === 'installed'){

            // new sw registered and content cached
            removeLoader();
          }
        };
      }

      if(swRegistration.active){
        // here I know that `service-worker.js` was already installed
        // but not sure it there are changes
        // If there are no changes it is the last thing I can check
        // AFAIK no events are fired afterwards
      }

    })
    .catch(function(e) {
      console.error('Error during service worker registration:', e);
    });
});

看完spec很明显，没有像 updatenotfound 这样的处理程序。看起来 serviceWorker.register 检查 service-worker.js 是否通过运行 get-newest-worker-algorithm 在内部更改，但我看不到通过公共(public) api 公开的类似方法。

我认为我的选择是:

• 在 service worker 注册激活后等待几秒钟，看看是否触发了 onupdatefound
• 如果缓存未更新，则从 service-worker.js 代码触发自定义事件

还有其他建议吗？

---

编辑:

我想出了一些代码，通过在 SW 注册和 SW 客户端之间使用 postMessage() 解决了这个问题(如@pate 所建议的那样)

下面的demo试图通过postMessage实现SW客户端和SW注册之间的校验，但是失败了，因为SW代码已经被缓存了DEMO

---

编辑:

所以现在看来​​我无法实现我想要的，因为:

1. 当 service worker 处于事件状态时，您无法通过评估 SW 中的某些代码来检查更新 - 这仍然是相同的缓存 SW，那里没有变化
2. 您需要等待 onupdatefound，没有其他任何东西会通知 SW 的更改
3. activation 旧版 SW 在 onupdatefound
之前
4. 如果没有变化，激活后不会触发任何东西
5. 软件注册update()不成熟，不断变化，从 Chrome 46 开始，如果操作成功完成或没有更新，update() 将返回一个解析为“undefined”的 promise
6. 设置超时以推迟 View 渲染不是最佳选择，因为对于应该设置多长时间没有明确的答案，这也取决于 SW 大小

Answer 1

Fabio 提供的另一个答案无效。 Service Worker 脚本无权访问 DOM。不可能从 DOM 中删除任何东西，或者，例如，从 Service Worker 中操作任何正在处理 DOM 元素的数据。该脚本单独运行，没有共享状态。

不过，您可以做的是在实际运行页面的 JS 和 Service Worker 之间发送消息。我不确定这是否是执行 OP 所要求的最佳方法，但可用于实现它。

1. 在页面上注册一个 onmessage 处理器
2. 从 SW 的激活或安装事件向页面发送消息
3. 在页面上收到消息后采取相应行动

我自己将软件版本号保存在软件内部的一个变量中。然后我的 SW 将该版本号发布到页面，页面将其存储到浏览器的 localStorage 中。下次加载页面时，SW 将其当前版本号发布到页面上，onmessage 处理程序将其与当前存储的版本号进行比较。如果它们不相同，则 SW 已更新为包含在消息中的某个版本号。之后，我更新了版本号的 localStorage 副本并完成了这个和那个。

此流程也可以通过其他方式完成:从页面向 SW 发送一条消息，让 SW 回复一些内容，然后采取相应的行动。

我希望我能够清楚地解释我的想法:)