рабочая область-навигация-предварительная загрузка

Книга « Ускорение Service Worker с помощью предварительной загрузки навигации » отлично объясняет, что такое предварительная загрузка навигации и преимущества, которые она предлагает веб-приложениям, сервис-воркер которых не обрабатывает явным образом запросы навигации .

Что делает этот модуль?

workbox-navigation-preload будет выполнять проверку во время выполнения, чтобы узнать, поддерживает ли текущий браузер предварительную загрузку навигации, и если да, то автоматически создаст обработчик события activate , чтобы включить ее.

Общий код внутри workbox-core , который обрабатывает сетевые запросы во всем Workbox, также был обновлен, чтобы автоматически использовать преимущества ответа на предварительную загрузку, если он доступен. Это означает, что любая из встроенных стратегий может автоматически использовать предварительную загрузку навигации, как только она включена.

Кому следует включать предварительную загрузку навигации?

Разработчикам, которые уже обрабатывают навигацию, отвечая предварительно кэшированным HTML (потенциально настроенным с помощью резервной оболочки App Shell), не нужно включать предварительную загрузку навигации! Эта функция предназначена для уменьшения задержки навигации для разработчиков, которые не могут предварительно кэшировать свой HTML-код, но все же хотят использовать Workbox для кэширования других ресурсов на своих сайтах.

Например, если вы следуете шаблону App Shell и у вас уже настроен маршрут навигации для использования предварительно кэшированного HTML, включение предварительной загрузки навигации будет пустой тратой. Ответ сети, связанный с запросом предварительной загрузки, никогда не будет использован, поскольку предварительно кэшированный HTML будет использоваться безоговорочно.

Основное использование

import * as navigationPreload from 'workbox-navigation-preload';
import {NetworkFirst} from 'workbox-strategies';
import {registerRoute, NavigationRoute} from 'workbox-routing';

// Enable navigation preload.
navigationPreload.enable();

// Swap in NetworkOnly, CacheFirst, or StaleWhileRevalidate as needed.
const strategy = new NetworkFirst({
  cacheName: 'cached-navigations',
  plugins: [
    // Any plugins, like `ExpirationPlugin`, etc.
  ],
});

const navigationRoute = new NavigationRoute(strategy, {
  // Optionally, provide a allow/denylist of RegExps to determine
  // which paths will match this route.
  // allowlist: [],
  // denylist: [],
});

registerRoute(navigationRoute);

Какова история поддержки браузера?

В настоящее время Google Chrome — единственный браузер, поддерживающий предварительную загрузку навигации. enable() проверит поддержку браузера во время выполнения и попытается включить предварительную загрузку навигации только в том случае, если текущий браузер поддерживает ее. Поэтому можно безоговорочно вызывать enable() в вашем сервис-воркере.

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

workbox-navigation-preload.disable()

workbox-navigation-preload.enable(
  headerValue?: string,
)

workbox-navigation-preload.isSupported()