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 可能帶來的效能影響。

方法

disable()

workbox-navigation-preload.disable()

如果瀏覽器支援導覽預先載入,這項功能就會停用。

enable()

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

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

參數

  • headerValue

    字串 選用

isSupported()

workbox-navigation-preload.isSupported()

傳回

  • boolean

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