NavigationPreload и его настройка

Navigation Preload — это функциональность, которая позволяет ускорить загрузку страниц в сервис-воркерах, особенно при стратегиях кеширования типа Network First. Она активируется на этапе установки сервис-воркера и позволяет браузеру параллельно запрашивать ресурс страницы, пока сервис-воркер обрабатывает событие fetch. Это сокращает задержки, связанные с ожиданием активации воркера перед выполнением сетевых запросов.

Активация Navigation Preload

Для включения Navigation Preload в сервис-воркере Workbox используется метод:

workbox.navigationPreload.enable();

Этот вызов следует выполнять внутри обработчика события activate:

self.addEventListener('activate', (event) => {
  event.waitUntil(
    (async () => {
      if (self.registration.navigationPreload) {
        await self.registration.navigationPreload.enable();
      }
    })()
  );
});

Ключевые моменты:

  • Проверка self.registration.navigationPreload необходима для совместимости с браузерами, которые не поддерживают Navigation Preload.
  • Активация происходит один раз при активации воркера; повторная активация не требуется.

Использование Navigation Preload с Workbox Routing

После активации Navigation Preload его можно использовать в маршрутах Workbox для стратегий типа Network First, чтобы ускорить получение основной HTML-страницы.

Пример настройки маршрута:

workbox.routing.registerRoute(
  ({ request }) => request.mode === 'navigate',
  new workbox.strategies.NetworkFirst({
    cacheName: 'pages-cache',
    plugins: [
      {
        // Плагин для обработки navigation preload
        fetchDidFail: async ({ request }) => {
          console.log('Network request failed for:', request.url);
        }
      }
    ]
  })
);

Внутри стратегии NetworkFirst Navigation Preload используется автоматически, если он был включен на активации. При этом запрос страницы выполняется параллельно с обработкой события fetch, что минимизирует задержки.

Настройка Navigation Preload

Navigation Preload поддерживает конфигурацию заголовков запроса. В Workbox это делается через объект preloadResponse:

self.addEventListener('fetch', (event) => {
  event.respondWith(
    (async () => {
      const preloadResponse = await event.preloadResponse;
      if (preloadResponse) {
        return preloadResponse;
      }
      return fetch(event.request);
    })()
  );
});

Особенности:

  • event.preloadResponse возвращает промис, который резолвится в Response, если Navigation Preload сработал, или undefined, если запрос не был предзагружен.
  • Это позволяет в стратегиях NetworkFirst использовать предзагруженный ответ вместо дополнительного сетевого запроса.

Совмещение с кэшированием

Navigation Preload особенно полезен вместе с кэшированием:

  1. Сначала сервис-воркер проверяет кеш.
  2. Если в кеше нет актуального ответа, используется Navigation Preload.
  3. Если предзагруженного ответа нет, выполняется стандартный сетевой запрос.

Пример интеграции:

workbox.routing.registerRoute(
  ({ request }) => request.mode === 'navigate',
  async ({ event }) => {
    const cache = await caches.open('pages-cache');
    const cachedResponse = await cache.match(event.request);

    if (cachedResponse) {
      return cachedResponse;
    }

    const preloadResponse = await event.preloadResponse;
    if (preloadResponse) {
      cache.put(event.request, preloadResponse.clone());
      return preloadResponse;
    }

    const networkResponse = await fetch(event.request);
    cache.put(event.request, networkResponse.clone());
    return networkResponse;
  }
);

Преимущества такой схемы:

  • Быстрое получение контента за счет предзагрузки.
  • Минимизация повторных сетевых запросов.
  • Полная интеграция с механизмом кэширования Workbox.

Ограничения и особенности

  • Navigation Preload поддерживается только для навигационных запросов (request.mode === 'navigate').
  • Требует HTTPS, так как работает в контексте сервис-воркеров.
  • Предзагрузка не заменяет кэширование, а лишь ускоряет сетевые запросы до момента их обработки воркером.
  • В некоторых браузерах с медленным соединением эффект может быть менее заметен.

Navigation Preload в Workbox позволяет строить быстрые и отзывчивые Progressive Web App, минимизируя задержки при загрузке страниц и обеспечивая эффективное сочетание сетевых запросов и кэширования.

Оглавление