NavigationPreloadManager

Интерфейс NavigationPreloadManager API сервисных рабочих процессов Service Worker API предоставляет методы для управления предварительной загрузкой ресурсов параллельно с запуском сервисного рабочего процесса.

Если поддерживается, объект этого типа возвращается ServiceWorkerRegistration.navigationPreload. Результат запроса предварительной загрузки ожидает выполнение, используя промис, возвращаемый FetchEvent.preloadResponse.

NavigationPreloadManager.enable()

Включает предварительную загрузку навигации, возвращая Promise, который разрешается значением undefined.

NavigationPreloadManager.disable()

Отключает предварительную загрузку навигации, возвращая Promise, который разрешается значением undefined.

NavigationPreloadManager.setHeaderValue()

Устанавливает значение HTTP-заголовка Service-Worker-Navigation-Preload, отправляемого в запросах предварительной загрузки, и возвращает пустой Promise.

NavigationPreloadManager.getState()

Возвращает Promise, который разрешается объектом со свойствами, указывающими, включена ли предварительная загрузка и какое значение будет отправлено в HTTP-заголовке Service-Worker-Navigation-Preload в запросах предварительной загрузки.

Сервисные рабочие процессы обрабатывают события fetch() от имени сайта для страниц в заданном объеме. Когда пользователь переходит на страницу, использующую сервисный рабочий процесс, браузер запускает рабочий процесс (если он не запущен), затем отправляет ему событие fetch и ожидает результат. Получив событие, рабочий процесс возвращает ресурс из кэша, если он есть, или же загружает ресурс с удаленного сервера (сохраняя копию для возврата в будущих запросах).

Сервисный рабочий процесс не может обрабатывать события от браузера до своего запуска. Это неизбежно, но обычно не оказывает большого влияния. Сервисные рабочие процессы часто уже запущены (они остаются активными некоторое время после обработки других запросов). Даже если сервисному рабочему процессу нужно запуститься, большая часть времени он может возвращать значения из кэша, что очень быстро. Однако в тех случаях, когда рабочему процессу нужно запуститься перед началом загрузки удаленного ресурса, задержка может быть значительной.

NavigationPreloadManager предоставляет механизм для одновременной загрузки ресурсов с запуском сервисного рабочего процесса, так что к тому моменту, когда рабочий процесс сможет обработать запрос fetch от браузера, ресурс может быть полностью или частично загружен. Это делает случай, когда рабочему процессу нужно запуститься, «не хуже», чем когда рабочий процесс уже запущен, и в некоторых случаях лучше.

Менеджер предварительной загрузки отправляет HTTP-заголовок Service-Worker-Navigation-Preload с запросами предварительной загрузки, позволяя настраивать ответы для запросов предварительной загрузки. Это может использоваться, например, для уменьшения передаваемых данных до части исходной страницы или для настройки ответа на основе состояния входа пользователя.

Примеры здесь взяты с Ускорение сервисных рабочих процессов с предварительной загрузкой навигации (developer.chrome.com).

Ниже мы включаем предварительную загрузку навигации в обработчике событий activate сервисного рабочего процесса после использования ServiceWorkerRegistration.navigationPreload для определения поддержки функции (это возвращает NavigationPreloadManager для сервисного рабочего процесса или undefined если функция не поддерживается).

addEventListener("activate", (event) => {
  event.waitUntil(
    (async () => {
      if (self.registration.navigationPreload) {
        // Enable navigation preloads!
        await self.registration.navigationPreload.enable();
      }
    })(),
  );
});

Следующий код демонстрирует обработчик событий fetch сервисного рабочего процесса, использующий предварительно загруженный ответ (FetchEvent.preloadResponse).

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

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

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);
    })(),
  );
});

Браузер отправляет HTTP-заголовок Service-Worker-Navigation-Preload с запросами предварительной загрузки со значением по умолчанию true. Это позволяет серверам различать обычные и запросы предварительной загрузки и отправлять разные ответы в каждом случае, если это необходимо.

Значение заголовка может быть изменено на любое другое строковое значение с помощью NavigationPreloadManager.setHeaderValue() для предоставления дополнительного контекста для операции предварительной загрузки. Например, вы можете установить значение в идентификатор вашего последнего кэшированного ресурса, чтобы сервер не возвращал ресурсы, если они фактически не нужны. Аналогично, вы можете настроить возвращаемую информацию на основе статуса аутентификации вместо использования файлов cookie.

Ниже представлен код, демонстрирующий установку значения директивы заголовка в некоторую переменную newValue.

navigator.serviceWorker.ready
  .then((registration) =>
    registration.navigationPreload.setHeaderValue(newValue),
  )
  .then(() => {
    console.log("Done!");
  });

Ускорение сервисных рабочих процессов с предварительной загрузкой навигации > Настраиваемые ответы для предварительных загрузок предоставляет более полный пример сайта, где ответ для веб-страницы статьи формируется из кэшированного заголовка и футера, так что для предварительной загрузки возвращается только содержимое статьи.

Вы можете использовать NavigationPreloadManager.getState() для проверки включения предварительной загрузки навигации и определения значения директивы, отправляемого с HTTP-заголовком Service-Worker-Navigation-Preload для запросов предварительной загрузки.

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

navigator.serviceWorker.ready
  .then((registration) => registration.navigationPreload.getState())
  .then((state) => {
    console.log(state.enabled); // boolean
    console.log(state.headerValue); // string
  });

• Ускорение Service Worker с помощью предварительной загрузки навигации (developer.chrome.com)