CacheStorage: метод match()

Метод match() интерфейса CacheStorage проверяет, является ли заданный Request или строка URL ключом для сохранённого Response. Этот метод возвращает Promise для Response или Promise, который разрешается в undefined в случае отсутствия совпадения.

Вы можете получить доступ к CacheStorage через свойство Window.caches в окнах или через свойство WorkerGlobalScope.caches в рабочих процессах.

Cache объекты ищутся в порядке создания.

request

Request , который вы хотите сопоставить. Это может быть объект Request или строка URL.

options Необязательно

Объект, свойства которого управляют тем, как выполняется сопоставление в операции match. Доступные параметры:

ignoreSearch

Логическое значение, определяющее, следует ли игнорировать строку запроса в URL при поиске совпадений. Например, если значение установлено в true, часть ?value=bar URL http://foo.com/?value=bar будет проигнорирована при выполнении поиска. По умолчанию установлено значение false.

ignoreMethod

Логическое значение. Если установлено в значение true, операции сопоставления не будут проверять метод Request http (обычно разрешены только GET и HEAD). По умолчанию установлено значение false.

ignoreVary

Логическое значение. Если установлено в значение true, операция сопоставления не будет выполнять проверку заголовка VARY. Другими словами, если URL совпадает, вы получите совпадение, независимо от того, есть ли у объекта Response заголовок VARY или нет. По умолчанию установлено значение false.

cacheName

Строка, представляющая конкретный кэш, в котором нужно выполнить поиск.

Promise, который разрешается с соответствующим Response. Если соответствующий ответ на указанный запрос не найден, обещание разрешается со значением undefined.

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

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

self.addEventListener("fetch", (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      // caches.match() always resolves
      // but in case of success response will have value
      if (response !== undefined) {
        return response;
      } else {
        return fetch(event.request)
          .then((response) => {
            // response may be used only once
            // we need to save clone to put one copy in cache
            // and serve second one
            let responseClone = response.clone();

            caches.open("v1").then((cache) => {
              cache.put(event.request, responseClone);
            });
            return response;
          })
          .catch(() => caches.match("/gallery/myLittleVader.jpg"));
      }
    }),
  );
});

• Использование сервисных рабочих процессов
• Cache
• Window.caches и WorkerGlobalScope.caches