FetchEvent

FetchEvent() (en-US)

Создаёт новый объект FetchEvent. Как правило, данный конструктор не используется. Браузер самостоятельно создаёт данные объекты и передаёт их в обработчик событий fetch.

Данный класс наследует все свойства класса Event.

fetchEvent.clientId (en-US) Только для чтения

Идентификатор (en-US) клиента (en-US) того же источника, отправившего запрос.

fetchEvent.preloadResponse (en-US) Только для чтения

Промис для запроса, или же пустой промис, если не произошла навигация или предзагрузка навигации (en-US) отключена.

fetchEvent.request (en-US) Только для чтения

Запрос (Request) от браузера.

fetchEvent.replacesClientId (en-US) Только для чтения

Идентификатор (en-US) клиента (en-US), заменяемого при навигации.

fetchEvent.resultingClientId (en-US) Только для чтения

Идентификатор (en-US) клиента (en-US), заменившего прошлый клиент при навигации.

Данный класс наследует методы класса ExtendableEvent.

fetchEvent.respondWith() (en-US)

Перехватывает запрос и отправляет промис с ответом.

extendableEvent.waitUntil()

Продлевает выполнение обработчика события до завершения переданного промиса. Используется чтобы уведомить браузер о событии, продолжающемся после отправки ответа, таком как обновление кеша или потоковая передача.

В данном примере все не-GET запросы будут обрабатываться стандартными средствами браузера. В случае GET запросов, service worker попробует найти ответ в кеше, а в случае его отсутствия получит данные с сервера. Также, он асинхронно обновит данные в кеше.

self.addEventListener('fetch', event => {
  // В случае не-GET запроса браузер должен сам обрабатывать его
  if (event.request.method != 'GET') return;

  // Обрабатываем запрос с помощью логики service worker
  event.respondWith(async function() {
    // Пытаемся получить ответ из кеша.
    const cache = await caches.open('dynamic-v1');
    const cachedResponse = await cache.match(event.request);

    if (cachedResponse) {
      // Если кеш был найден, возвращаем данные из него
      // и запускаем фоновое обновление данных в кеше.
      event.waitUntil(cache.add(event.request));
      return cachedResponse;
    }

    // В случае, если данные не были найдены в кеше, получаем их с сервера.
    return fetch(event.request);
  }());
});

• Promise
• Fetch API