如何确保 `self.skipWaiting()` 在允许 Service Worker 的获取事件中的 POST 请求的同时工作

Question

我注意到我的 service worker 没有响应 self.skipWaiting() 当还有任务要完成时运行。

在我的 service worker 的 fetch 事件中，我看到各种使用 HTTP POST 请求的 Firebase 民意调查。

如果我像这样在 service worker 中处理这些请求：

self.addEventListener("fetch", (event) => {
  if (event.request.method === "POST") {
    return event.respondWith(new Response(null, {status: 444}))
  }

  ...
})

然后 self.skipWaiting() 总是按预期工作。

但是，如果我执行以下操作：

self.addEventListener("fetch", (event) => {
  if (event.request.method === "POST") {
    return event.respondWith(fetch(event.request))
  }

  ...
})

那么self.skipWaiting()好像没有效果。在 Chrome 的 devtools 中，新的 service worker 仍然没有激活（点击蓝色的 skipWaiting link 也没有效果）。

因此，我似乎必须在确保 self.skipWaiting() 正常工作和允许 Firebase 的轮询请求之间做出选择，但不能同时选择两者。有没有办法让 self.skipWaiting() 正常工作，同时仍然允许 Firebase 的轮询请求？

Answer 1

我没有从你的代码中看出 你在哪里 调用 self.skipWaiting()，但 main thing to know about that function is that it "flips" a flag and attempts to activate the waiting service worker. I'm not sure which part of that sequence is not working as expected, and I'm also not sure if you're describing something that happens just in Chrome or in other browsers as well. If you're seeing unexpected behavior just in Chrome, filing a bug 可能是你最好的选择。

也就是说，为了提供解决方法，我想说您根本不必在 fetch 事件处理程序中调用 event.respondWith()。如果所有 fetch 处理程序都完成而没有任何一个调用 fetchEvent.respondWith()，则将使用默认的浏览器网络行为。所以你可以像下面这样重组你的 fetch 处理程序，也许可以解决这个问题。

self.addEventListener("fetch", (event) => {
  if (event.request.method === 'POST') {
    return;
  }

  // Your non-POST response logic goes here.
});

如何确保 `self.skipWaiting()` 在允许 Service Worker 的获取事件中的 POST 请求的同时工作

How to ensure that `self.skipWaiting()` works while allowing POST requests in service worker's fetch event

javascript

service-worker