このページは Cloud Translation API によって翻訳されました。

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 を配布した場合のパフォーマンスへの影響を慎重に測定することをおすすめします。

Methods

disable()

workbox-navigation-preload.disable()

ブラウザがナビゲーションプリロードをサポートしている場合は、これによって無効化されます。

enable()

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

ブラウザでナビゲーションプリロードがサポートされている場合は、これによって有効になります。

パラメータ

headerValue

string（省略可）

isSupported()

workbox-navigation-preload.isSupported()

戻り値

boolean

現在のブラウザがナビゲーションプリロードの有効化をサポートしているかどうかを指定します。