workbox-navigation-preload

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

このモジュールの機能

workbox-navigation-preload は、現在のブラウザがナビゲーション プリロードをサポートしているかどうかをランタイムで確認し、サポートしている場合は、それを有効にするために activate イベント ハンドラを自動的に作成します。

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

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

事前キャッシュに保存された HTML で応答してナビゲーションを処理している（App Shell フォールバックで構成されている可能性もある）デベロッパーは、ナビゲーションのプリロードを有効にする必要はありません。この機能は、HTML をプリキャッシュできないが、Workbox を使用してサイト上の他のアセットのキャッシュ処理を行うデベロッパーのナビゲーション レイテンシを短縮することを目的としています。

たとえば、アプリシェル パターンに沿って、プリキャッシュされた 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() は実行時にブラウザのサポートを確認します。ナビゲーションのプリロードは、現在のブラウザがサポートしている場合にのみ有効にしようとします。したがって、サービス ワーカーで無条件に enable() を呼び出すことは安全です。

ただし、これらのブラウザではナビゲーション レイテンシの短縮は行われません。また、ナビゲーション リクエストを処理せず、ナビゲーション プリロードを使用しないサービス ワーカーを送信した場合のパフォーマンスへの影響を慎重に測定することをおすすめします。

workbox-navigation-preload.disable()

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

workbox-navigation-preload.isSupported()