ServiceWorkerGlobalScope: событие fetch

Событие fetch интерфейса ServiceWorkerGlobalScope срабатывает в глобальной области видимости service worker, когда поток основного приложения выполняет сетевой запрос. Оно позволяет service worker перехватывать сетевые запросы и отправлять настраиваемые ответы (например, из локального кэша).

Это событие не может быть отменено и не распространяется.

Используйте имя события в методах, таких как addEventListener(), или задайте свойство обработчика событий.

addEventListener("fetch", (event) => {});

onfetch = (event) => {};

Событие fetch срабатывает в глобальной области видимости service worker, когда поток основного приложения выполняет сетевой запрос. Это включает не только явные вызовы fetch() из основного потока, но и неявные сетевые запросы для загрузки страниц и подресурсов (например, JavaScript, CSS и изображений), выполняемые браузером после навигации по страницам.

Обработчик события получает объект FetchEvent, предоставляющий доступ к запросу как экземпляру Request.

Объект FetchEvent также предоставляет метод respondWith(), который принимает объект Response (или Promise, который разрешается в Response) в качестве параметра. Это позволяет обработчику события service worker предоставить ответ, который возвращается запросу в основном потоке.

Например, service worker может вернуть:

• Локально кэшированный ответ, полученный из интерфейса Cache.
• Ответ, который service worker генерирует, используя методы, такие как Response.json() или конструктор Response().
• Сетевую ошибку, используя метод Response.error(). Это приведет к отклонению вызова fetch().

Метод respondWith() может быть вызван только один раз для данного запроса. Если добавлено несколько обработчиков события fetch, они будут вызваны в порядке их регистрации до тех пор, пока один из них не вызовет respondWith().

Метод respondWith() должен вызываться синхронно: то есть вы не можете вызвать его в обработчике then.

Обычно обработчик события fetch будет использовать разные стратегии в зависимости от характеристик запроса, таких как его URL:

function strategy1() {
  return fetch("picnic.jpg");
}

function strategy2() {
  return Response.error();
}

const pattern1 = /^\/salamander/;
const pattern2 = /^\/lizard/;

self.addEventListener("fetch", (event) => {
  const url = new URL(event.request.url);
  if (pattern1.test(url.pathname)) {
    event.respondWith(strategy1());
  } else if (pattern2.test(url.pathname)) {
    event.respondWith(strategy2());
  }
});

Если respondWith() не вызывается в обработчике, то пользовательский агент автоматически выполняет исходный сетевой запрос. Например, в коде выше все запросы, которые не соответствуют pattern1 или pattern2 обрабатываются как если бы service worker не существовал.

Объект FetchEvent.

Этот обработчик события fetch сначала пытается найти ответ в кэше. Если ответ найден, возвращается кэшированный ответ. В противном случае, он пытается получить ресурс из сети.

async function cacheThenNetwork(request) {
  const cachedResponse = await caches.match(request);
  if (cachedResponse) {
    console.log("Found response in cache:", cachedResponse);
    return cachedResponse;
  }
  console.log("Falling back to network");
  return fetch(request);
}

self.addEventListener("fetch", (event) => {
  console.log(`Handling fetch event for ${event.request.url}`);
  event.respondWith(cacheThenNetwork(event.request));
});

Этот обработчик события fetch реализует политику «только кэш» для скриптов и стилей. Если свойство destination запроса равно "script" или "style", обработчик ищет только в кэше, возвращая ошибку, если ответ не найден. Все остальные запросы обрабатываются через сеть.

async function cacheOnly(request) {
  const cachedResponse = await caches.match(request);
  if (cachedResponse) {
    console.log("Found response in cache:", cachedResponse);
    return cachedResponse;
  }
  return Response.error();
}

self.addEventListener("fetch", (event) => {
  if (
    event.request.destination === "script" ||
    event.request.destination === "style"
  ) {
    event.respondWith(cacheOnly(event.request));
  }
});

• Использование Service Workers
• Базовый пример кода Service workers
• fetch() метод
• Request интерфейс
• Response интерфейс