javascript - self.skipWaiting() 在 Service Worker 中不起作用

Question

我有一个服务人员。这是安装事件:

self.addEventListener('install', function (event) {
    console.log('Installing Service Worker ...', event);

    return self.skipWaiting()
    .then(() => caches.open(CACHE_STATIC_NAME))
    .then(function (cache) {
        return cache.addAll([
            './file1.html',
            './file2.html'
        ])
    })
});

出于某种原因，当我编辑 service worker 代码并更新 service worker 文件 URL 中的查询参数时，它会安装但不会激活(根据 Chrome DevTools)——即使我调用了 self。 skipWaiting().

奇怪的是，如果我进入控制台，进入 service worker 的范围并自己键入 self.skipWaiting()，它会立即激活。

几个小时以来，我一直在努力弄清楚发生了什么，但我完全被难住了。我在这里遗漏了什么吗？

Answer 1

旧的 SW 在它仍在运行任务时可能不会停止——例如，如果它有一个长时间运行的获取请求(例如服务器发送的事件/事件源，或获取流；虽然我不认为 websockets 会导致这个作为 SW我认为会忽略它们)。

不过，我发现浏览器之间的行为有所不同。 Chrome 似乎在现有任务运行时等待(因此 skipWaiting 将失败...)，但 Safari 似乎终止了任务并激活了新的软件。

测试这是否会导致您的问题的一个好方法是在您请求 skipWaiting(以终止网络连接)后立即终止您的服务器。 (仅在开发工具中单击“离线”似乎并不会终止所有正在运行的连接，例如 EventSources 保持运行。)

您可以让 SW 忽略某些路由(如下)，或者您可以尝试强制终止请求(可能使用 AbortController)。

self.addEventListener('fetch', function(event) {
  const { method, url } = event.request;
  if(event.request.method !== "GET") return false;
  if(url === "https://example.com/poll") return false;

  event.respondWith(
    caches.match(match).then(function(response) {
      return response || fetch(event.request);
    })
  );
});

skipWaiting 的过程在这个规范中:

https://w3c.github.io/ServiceWorker/#try-activate-algorithm

但是我发现在激活新软件之前浏览器是应该等待任务还是终止任务(或者将它们转移到新软件？)不是很清楚；如前所述，目前浏览器之间的工作方式似乎有所不同......