workbox-navigation-preload

「ナビゲーション プリロードを使用して Service Worker を高速化する」は、ナビゲーション プリロードの概要と、Service Worker がナビゲーション リクエストを明示的に処理しないウェブアプリにとってのメリットについて説明されています。

このモジュールの内容

workbox-navigation-preload は、現在のブラウザがナビゲーションのプリロードをサポートしているかどうかを実行時にチェックし、サポートしている場合は、activate イベント ハンドラを自動的に作成して有効にします。

Workbox 全体でネットワーク リクエストを処理する workbox-core 内の共有コードも更新され、プリロード レスポンスが利用可能な場合は自動的に利用されるようになりました。つまり、ナビゲーション プリロードを有効にすると、どの組み込み戦略でも自動的に活用できます。

ナビゲーションのプリロードを有効にするユーザー

事前キャッシュされた 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()