Question

我想要实现的目标：

使用loader / spinner渲染页面
如果service-worker.js已注册并处于活动状态，则检查更新
- 如果没有更新，则删除加载程序
- 如果安装了updatefound和新版本，则重新加载页面
其他注册service-worker.js
- 当updatefound表示已安装新的时，删除装载程序

我正在使用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在内部进行了更改，但我看不到通过公共API公开的类似方法。

我认为我的选择是：

在服务工作者注册变为活动状态后等待几秒钟，以查看是否已触发onupdatefound
~~从service-worker.js代码触发自定义事件~~

还有其他建议吗？

修改

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

以下演示尝试通过SW客户端和SW注册之间的postMessage进行检查，但由于SW代码已缓存DEMO

，因此失败

修改

所以现在看起来我无法实现我想要的东西，因为：

当服务工作者处于活动状态时，您无法通过评估SW中的某些代码来检查更新 - 这仍然是相同的缓存SW，没有更改
您需要等待onupdatefound，没有任何其他内容可以通知SW中的更改
activation出现在onupdatefound
如果没有变化，activation
SW注册update()尚不成熟，不断变化，Starting with Chrome 46, update() returns a promise that resolves with 'undefined' if the operation completed successfully or there was no update
设置超时以推迟视图渲染是次优的，因为没有明确的答案应该设置多长时间，这也取决于SW大小

Answer 1

Fabio提供的另一个答案不起作用。 Service Worker脚本无权访问DOM。无法从DOM中删除任何内容，或者，例如，操纵处理来自Service Worker 中的DOM元素的任何数据。该脚本单独运行，没有共享状态。

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

在页面上注册onmessage处理程序

从SW的激活或安装事件向页面发送消息

在页面上收到消息时采取相应行动

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

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

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

Answer 2

在我脑海中弹出的唯一方法是正常启动加载程序，然后在service-worker中的install函数中将其删除。我将在您的service-worker.js中试一试：

self.addEventListener('install', function(e) {
  console.log('[ServiceWorker] Install');
  e.waitUntil(
    caches.open(cacheName).then(function(cache) {
      console.log('[ServiceWorker] Caching app shell');
      return cache.addAll(filesToCache);
    }).then(function() {
        ***removeLoader();***
        return self.skipWaiting();
    })
  );
});

方法：ServiceWorker检查是否准备好更新

2 个答案: