FetchEvent: свойство preloadResponse

Только для чтения свойство preloadResponse интерфейса FetchEvent возвращает Promise, который разрешается до навигационного предзагруженного Response, если была вызвана предварительная загрузка навигации, или undefined в противном случае.

Предварительная загрузка навигации запускается, если предварительная загрузка навигации включена, запрос является GET запросом, и запрос является запросом навигации (генерируется браузером при загрузке страниц и фреймов).

Сервисный рабочий может ожидать этот промис в своем обработчике события fetch, чтобы отслеживать завершение запроса fetch, выполненного во время запуска сервисного работника.

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

Этот фрагмент кода взят из Ускорение сервисного работника с помощью предварительной загрузки навигации.

Обработчик событий onfetch слушает событие fetch. При срабатывании обработчик вызывает FetchEvent.respondWith() для передачи промиса обратно управляемой странице. Этот промис будет разрешен с запрошенным ресурсом.

Если в объекте Cache есть соответствующий запрос URL, то код возвращает промис для получения ответа из кэша. Если совпадений в кэше нет, код возвращает промис в preloadResponse. Если нет соответствующего кэша или предзагруженного ответа, код получает ответ из сети и возвращает связанный промис.

addEventListener("fetch", (event) => {
  event.respondWith(
    (async () => {
      // Respond from the cache if we can
      const cachedResponse = await caches.match(event.request);
      if (cachedResponse) return cachedResponse;

      // Else, use the preloaded response, if it's there
      const response = await event.preloadResponse;
      if (response) return response;

      // Else try the network.
      return fetch(event.request);
    })(),
  );
});

• Ускорение сервисного работника с помощью предварительной загрузки навигации
• Использование сервисных рабочих
• Пример кода сервисных рабочих
• Использование веб-работников