需要改变什么来防止服务人员的双重请求？

Question

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

1. 克隆这个仓库。
2. yarn && yarn dev
3. 转至localhost:3000(F12)->Applications->Service Workers 并确保已安装 Service Worker。
4. 转到“网络”选项卡并刷新几次（F5）
5. 观察网络请求如何加倍。

我所看到的示例：

---

或者，如果您想手动执行此操作，请按照以下说明操作：

1. yarn create-next-app app_name
2. cd app_name && yarn
3. 在公共文件夹中，创建名为的文件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 dev
6. 转到localhost:3000并确保 Service Worker 已加载到 (F12)Applications/Service Workers 下
7. 转到“网络”选项卡并刷新页面几次。查看 Service Worker 如何为每个请求发送两个请求

---

我需要在service-worker.js代码中更改哪些内容才能避免重复请求？

Answer 1

这是 Chrome DevTools 显示请求的方式，也是预期的。

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