Кэш: метод put()

Метод put() интерфейса Cache позволяет добавлять пары ключ/значение в текущий объект Cache.

Часто вам нужно будет fetch() один или несколько запросов, а затем добавить результат непосредственно в ваш кэш. В таких случаях лучше использовать Cache.add()/Cache.addAll(), так как они являются сокращенными функциями для одной или нескольких из этих операций.

fetch(url).then((response) => {
  if (!response.ok) {
    throw new TypeError("Bad response status");
  }
  return cache.put(url, response);
});

request

Объект Request или URL, которые вы хотите добавить в кэш.

response

Response, который вы хотите сопоставить с запросом.

Обещание Promise, которое разрешается значением undefined.

TypeError

Возвращается, если схема URL не http или https.

Этот пример взят из примера MDN simple-service-worker (см. simple-service-worker, работающий онлайн). Здесь мы ждём срабатывания события FetchEvent. Мы создаём пользовательский ответ следующим образом:

1. Проверяем, найдено ли соответствие запросу в CacheStorage с помощью CacheStorage.match(). Если да, то используем его.
2. Если нет, открываем кэш v1 с помощью open(), помещаем стандартный запрос в сеть в кэш с помощью Cache.put() и возвращаем клонированный стандартный запрос из сети с помощью return response.clone(). Клонирование необходимо, потому что put() потребляет тело ответа.
3. Если это не удаётся (например, из-за отсутствия подключения к сети), возвращается резервный ответ.

let response;
const cachedResponse = caches
  .match(event.request)
  .then((r) => (r !== undefined ? r : fetch(event.request)))
  .then((r) => {
    response = r;
    caches.open("v1").then((cache) => {
      cache.put(event.request, response);
    });
    return response.clone();
  })
  .catch(() => caches.match("/gallery/myLittleVader.jpg"));

• Использование Service Workers
• Cache
• Window.caches и WorkerGlobalScope.caches