service-worker - 改变什么来防止来自服务人员的双重请求？

Question

请不要标记为重复。这与 SO 上的其他类似问题并不完全相同。它更具体且可完全重现。

1. 克隆this repo 。
2. yarn && yarn 开发
3. 转到 localhost:3000 并确保在 (F12)->Applications->Service Worker 下安装了 Service Worker。
4. 转到网络选项卡并刷新几次(F5)
5. 观察网络请求是如何翻倍的。

我看到的示例:

---

或者，如果您想手动操作，请按照以下说明操作:

1. yarn create-next-app app_name
2. cd app_name && yarn
3. 在 public 文件夹中，创建名为 service-worker.js 的文件并粘贴以下代码:

addEventListener("install", (event) => {
  self.skipWaiting();
  console.log("Service worker installed!");
});

self.addEventListener("fetch", (event) => {
  event.respondWith(
    (async function () {
      const promiseChain = fetch(event.request.clone()); // clone makes no difference
      event.waitUntil(promiseChain); // makes no difference
      return promiseChain;
    })()
  );
});

4. 打开 pages/index.js 并在 import Head from "next/head"; 下方粘贴以下代码:

if (typeof window !== "undefined" && "serviceWorker" in navigator) {
  window.addEventListener("load", function () {
    // there probably needs to be some check if sw is already registered
    navigator.serviceWorker
      .register("/service-worker.js", { scope: "/" })
      .then(function (registration) {
        console.log("SW registered: ", registration);
      })
      .catch(function (registrationError) {
        console.log("SW registration failed: ", registrationError);
      });
  });
}

5. yarn 开发
6. 转到 localhost:3000 并确保 Service Worker 已在 (F12)Applications/Service Worker 下加载
7. 转到“网络”标签并刷新页面几次。查看 service worker 如何为每个请求发送两个请求

---

我需要在 service-worker.js 代码中进行哪些更改，以免出现双重请求？

Answer 1

这就是 Chrome DevTools 显示请求和预期的方式。

有一个从客户端 JavaScript 到 Service Worker 的资源请求和一个从 Service Worker 到服务器的请求。除非服务 worker 缓存了响应并且不需要检查服务器是否有更新，否则这种情况总是会发生。