Что изменить, чтобы предотвратить двойной запрос от работника службы?

Question

Пожалуйста, не отмечайте как дубликат. Это не является точной копией других подобных вопросов здесь, на SO. Он более конкретен c и полностью воспроизводим.

1. Клон это репо.
2. yarn && yarn dev
3. Go до localhost:3000 и убедитесь, что в разделе (F12) -> Приложения-> Сервисные работники установлен сервисный работник.
4. Go на вкладку Сеть и несколько раз sh (F5)
5. Наблюдайте, как удваиваются сетевые запросы.

Пример того, что я вижу:

---

Или, если вы хотите сделать это вручную, следуйте инструкциям ниже:

1. yarn create-next-app app_name
2. cd app_name && yarn
3. в папке publi c, создайте файл с именем 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 go до localhost:3000 и убедитесь, что работник службы был загружен в (F12) Приложения / Работники службы Go на вкладку Сеть и обновите страницу sh несколько раз. Посмотрите, как работник службы отправляет два запроса для каждого

---

Что мне нужно изменить в коде service-worker.js, чтобы не было двойных запросов?

Answer 1

Это ожидаемо, и как Chrome DevTools отображает запросы.

Существует запрос ресурса от клиента JavaScript для работника сервиса и запрос от работника сервиса на сервер. Это всегда будет происходить, если у работника службы нет кэшированного ответа и ему не нужно проверять сервер на наличие обновлений.

Answer 2

Не похоже на правильный способ инициализации сервисного работника в Next. js. Вам может понадобиться заглянуть в плагин next-pwa , чтобы сделать это правильно. Вот учебник PWA с Далее. js