如何確保 `self.skipWaiting()` 在服務工作者的 fetch 事件中允許 POST 請求時正常工作

Question

我注意到當仍有任務要運行時，我的服務人員沒有響應self.skipWaiting() 。

在我的 service worker 的fetch事件中，我看到了各種使用 HTTP POST 請求的 Firebase 輪詢。

如果我像這樣在服務人員中處理這些請求：

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鏈接也沒有效果）。

結果，似乎我必須在確保self.skipWaiting()有效和允許 Firebase 的輪詢請求之間做出選擇，但不能同時選擇兩者。 有沒有辦法讓self.skipWaiting()工作，同時仍然允許 Firebase 的輪詢請求？

Answer 1

我沒有從您的代碼中看到您調用self.skipWaiting()的位置，但要了解該函數的主要內容是它“翻轉”一個標志並嘗試激活waiting的服務人員。 我不確定該序列的哪一部分沒有按預期工作，我也不確定您是否在描述僅在 Chrome 或其他瀏覽器中發生的事情。 如果您只是在 Chrome 中看到意外行為，那么提交錯誤可能是您最好的選擇。

話雖如此，為了提供一種解決方法，我想說您根本不必在fetch事件處理程序中調用event.respondWith() 。 如果您的所有fetch處理程序都在沒有調用fetchEvent.respondWith()的情況下完成，則將使用默認的瀏覽器網絡行為。 所以你可以像下面這樣重組你的fetch處理程序，也許可以解決這個問題。

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

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