Workbox-navigation-Preload

「利用導覽預先載入功能加快服務工作站速度」一文，說明什麼是導覽預先載入，以及其對 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() 會在執行階段檢查瀏覽器支援，且只有在目前的瀏覽器支援導覽預先載入功能時，才會嘗試啟用該功能。因此，無條件地在 Service Worker 中呼叫 enable() 是很安全的。

請注意，這些瀏覽器不會影響瀏覽延遲的情況，因此建議您審慎評估無法處理導覽要求及不使用導覽預先載入的 Service Worker 可能帶來的效能影響。

workbox-navigation-preload.disable()

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

workbox-navigation-preload.isSupported()