Workbox-navigation-Preload

「透過導覽預先載入加快服務工作站速度」一文清楚說明導覽預先載入的概念，以及對服務工作站未明確處理導覽要求的網頁應用程式帶來的好處。

這個模組有什麼用途？

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() 會在執行階段檢查瀏覽器支援情形，並只在目前瀏覽器支援時嘗試啟用導覽預先載入功能。因此，在服務 worker 中無條件呼叫 enable() 是安全的。

要注意的是，這些瀏覽器無法享有降低瀏覽延遲的效益。 建議您仔細評估運送服務對成效的影響 不處理導覽要求，也不會使用導覽預先載入的 worker。

方法

disable()

workbox-navigation-preload.disable()

如果瀏覽器支援 Navigation Preload，則會停用此功能。

enable()

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

如果瀏覽器支援「導覽預先載入」，就會啟用這項功能。

參數

• headerValue

  string optional

isSupported()

workbox-navigation-preload.isSupported()

傳回

• 布林值

  目前的瀏覽器是否支援啟用功能 瀏覽預先載入。