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

Метод match() интерфейса Cache возвращает Promise, который разрешается на Response, связанный с первым соответствующим запросом в объекте Cache. Если соответствие не найдено, Promise разрешается на undefined.

request

Запрос Request, для которого вы пытаетесь найти ответы в кэше Cache. Это может быть объект 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.

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

Этот пример взят из примера настраиваемой страницы офлайн (живая демонстрация). Он использует кэш для предоставления выбранных данных, когда запрос терпит неудачу. Блок catch() срабатывает, когда вызов fetch() выбрасывает исключение. Внутри блока catch(), используется match() для возврата правильного ответа.

В этом примере в кэш будут помещены только HTML-документы, полученные с помощью HTTP-глагола GET. Если наше условие if () ложно, этот обработчик fetch не будет перехватывать запрос. Если зарегистрированы другие обработчики fetch, у них будет возможность вызвать event.respondWith(). Если ни один обработчик fetch не вызовет event.respondWith(), запрос будет обработан браузером так, как если бы служба рабочего процесса не участвовала. Если fetch() возвращает допустимый HTTP-ответ с кодом ответа в диапазоне 4xx или 5xx, функция catch() НЕ будет вызвана.

self.addEventListener("fetch", (event) => {
  // We only want to call event.respondWith() if this is a GET request for an HTML document.
  if (
    event.request.method === "GET" &&
    event.request.headers.get("accept").includes("text/html")
  ) {
    console.log("Handling fetch event for", event.request.url);
    event.respondWith(
      fetch(event.request).catch((e) => {
        console.error("Fetch failed; returning offline page instead.", e);
        return caches
          .open(OFFLINE_CACHE)
          .then((cache) => cache.match(OFFLINE_URL));
      }),
    );
  }
});

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