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

Question

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

1. 克隆这个repo。
2. yarn && yarn dev
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. 在公用文件夹中，创建名为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并确保已在 (F12)Applications/Service Workers 下加载了 service worker
7. 转到网络选项卡并刷新页面几次。查看 service worker 如何为每个请求发送两个请求

---

我需要在service-worker.js代码中更改什么以便没有双重请求？

标签： service-workerprogressive-web-appsnext.jsfetch-api

Answer 1

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

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