Service Worker. Как сделать чтобы запрос кешировался на время и в течение этого времени все запросы попадали в кеш?

Question

[anastasia__galkina]

У меня есть запрос, который дергается каждую секунду. Но при этом ответ приходит намного позже. Из-за этого образуется большая pending очередь. Я хочу чтобы запрос кешировался на время и в течение этого времени все запросы попадали в кеш. Насколько я правильно поняла, кеширование запросов происходит в методе fetch

// добавляем обработчик события "fetch"
self.addEventListener('fetch', e => {
  e.respondWith(
    fetch(e.request)
    .then(res => {
      const copyCache = res.clone()
      caches.open(CACHE_NAME).then(cache => {
        if (!(e.request.url.indexOf('chr') === 0))
        cache.put(e.request, copyCache)
      })
      return res
    })
    .catch(error => caches.match(e.request).then(res => res))
  )
})

Но моя реализация отправляет в кеш только через один запросы

Answer 1

[anastasia__galkina]

// добавляем обработчик события "fetch"
self.addEventListener("fetch", (event) => {
  console.log("Fetch событие для", event.request.url);

  event.respondWith(
    caches
    .match(event.request)
    .then((response) => {
      //Если response найден в кэше
      if (response) {
        console.log("Найден ", event.request.url, " в кэше");
        return response;
      }

      return fetch(event.request).then((response) => {
        // Если response не найден
        if (response.status === 404) {
          return caches.open(CACHE_NAME).then((cache) => {
            return cache.match("404.html");
          });
        }

        // Кэширование и возвращение response если его еще нет в кэше
        return caches.open(CACHE_NAME).then((cache) => {
          if (!(event.request.url.indexOf('chr') === 0))
          cache.put(event.request.url, response.clone());
          return response;
        });
      });
    })
    .catch(async (error) => {
      console.log("Error, ", error);
      // Если страница офлайн или нет сети
      return caches.open(CACHE_NAME).then((cache) => {
        return cache.match("404.html");
      });
    })
  );
});