「利用導覽預先載入功能加快服務工作站速度」一文,說明什麼是導覽預先載入,以及其對 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
目前的瀏覽器是否支援啟用導覽預先載入功能。