要更改什么以防止 service worker 的双重请求？

Question

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

克隆 this 存储库。
yarn && yarn dev
转到 localhost:3000 并确保在 (F12)->Applications->Service workers 下安装了 service worker。
转到“网络”选项卡并刷新几次 (F5)
观察网络请求如何翻倍。

我看到的例子：

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

yarn create-next-app app_name
cd app_name && yarn
在 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;
    })()
  );
});

打开 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);
      });
  });
}

yarn dev
转到 localhost:3000 并确保已在 (F12)Applications/Service Workers
转到“网络”选项卡并刷新页面几次。查看 Service Worker 如何为每个请求发送两个请求

我需要在 service-worker.js 代码中更改什么才能避免重复请求？

Answer 1

在 Next.js.You 中初始化 Service Worker 的方法似乎不正确，可能需要研究 next-pwa plugin to do it right.Here is the tutorial PWA with Next.js

Answer 2

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

客户端JavaScript向Service Worker请求资源，Service Worker向服务器请求资源。这总是会发生，除非 service worker 缓存了响应并且不需要检查服务器是否有更新。

Answer 3

如果有人正在寻找原始问题的答案'What to change to prevent double request from service worker?'，专门针对网络请求。

我找到了防止它发生的方法。在 serviceworker.js 中使用以下内容。（这也适用于 api 调用等）

self.addEventListener('fetch', async function(event) {

    await new Promise(function(res){setTimeout(function(){res("fetch request allowed")}, 9999)})
    return false

});

要更改什么以防止 service worker 的双重请求？

What to change to prevent double request from service worker?

service-worker

fetch-api

progressive-web-apps

next.js