Как единожды закешировать файл с данными вместо постоянного кеширования во время запроса к данным(PWA)?

Question

[Kizzeon]

У меня есть файл с данными по которым идёт поиск, но при каждом обращении к нему у меня он начинается наново кешироватся.
Вот код который постоянно кеширует этот файл:

self.addEventListener("fetch", function (event) {
    if (event.request.method !== "GET") return;
    event.respondWith(
      fetch(event.request)
        .then(function (response) {
          console.log("Add page to offline cache: " + response.url);
          event.waitUntil(updateCache(event.request, response.clone()));
          return response;
        })
        .catch(function (error) {
          console.log("Network request Failed. Serving content from cache: " + error);
          return fromCache(event.request);
        })
    );
  });
  
  function fromCache(request) {
    return caches.open(CACHE).then(function (cache) {
      return cache.match(request).then(function (matching) {
        if (!matching || matching.status === 404) {
          return Promise.reject("no-match");
        }
        return matching;
      });
    });
}

Как можно сделать так, что бы этот файл кешировался только единожды во время загрузки страницы?

Comments

[Дмитрий Беляев]

Поменять стратегию на cache-first, сейчас у Вас network-first по этому и грузит каждый раз заново.
Что запрошен конкретный файл можно узнать из url запроса - простой if
А дальше смотрим, есть в кэше - отдаем из кэша, нет - идем в сеть

Гуглите cache-first

Answer 1

[Александр Юдаков]

В вашем коде кэш используется, только если сеть недоступна.

Вот пример правильного кода из Google Developers, где сначала используется кэш, и только потом, если в кэше ничего нет, запрос отправляется в сеть:
https://developers.google.com/web/ilt/pwa/caching-...