ワークボックスのプレキャッシュ

Service Worker の特長の 1 つは、Service Worker のインストール時に一連のファイルをキャッシュに保存できることです。Service Worker を使用する前にコンテンツをキャッシュするため、これは多くの場合「プレキャッシュ」と呼ばれます。

これを行う主な理由は、デベロッパーがキャッシュを制御できることです。つまり、ファイルをキャッシュに保存するタイミングと期間を決定し、ネットワークを経由せずにブラウザに提供できるため、オフラインで動作するウェブアプリの作成に使用できます。

Workbox は、API を簡素化し、アセットが効率的にダウンロードされるようにすることで、プレキャッシュの面倒な作業の多くを解消します。

ワークボックスのプレキャッシュの仕組み

ウェブアプリが初めて読み込まれると、workbox-precaching はダウンロードするすべてのアセットを参照し、重複を削除し、関連する Service Worker イベントを接続してアセットをダウンロードして保存します。バージョニング情報(コンテンツ ハッシュなど)をすでに含む URL は、それ以上変更されることなくキャッシュキーとして使用されます。バージョニング情報を含まない URL の場合、キャッシュキーに URL クエリ パラメータが追加され、Workbox がビルド時に生成するコンテンツのハッシュを表します。

workbox-precaching は、これらすべてを Service Worker の install イベント中に行います。

その後、ユーザーがウェブアプリに再度アクセスし、事前キャッシュされたさまざまなアセットを持つ新しい Service Worker が作成されると、workbox-precaching は新しいリストを確認し、リビジョンに基づいて、まったく新しいアセットと、更新が必要な既存のアセットを判断します。新しいアセットやリビジョンの更新は、新しい Service Worker の install イベント中にキャッシュに追加されます。

この新しい Service Worker は、activate イベントがトリガーされるまで、リクエストへの応答に使用されません。workbox-precachingactivate イベントで、現在の URL のリストに存在しなくなったキャッシュ アセットを確認し、キャッシュから削除します。

workbox-precaching は、Service Worker がインストールされてアクティブになるたびにこれらの手順を実行し、ユーザーに最新のアセットがあることを確認して、変更されたファイルのみをダウンロードします。

事前にキャッシュに保存されたレスポンスの提供

precacheAndRoute() または addRoute() を呼び出すと、事前にキャッシュに保存された URL のリクエストと一致するルートが作成されます。

このルートで使用されるレスポンス戦略はキャッシュ ファーストです。事前にキャッシュに保存されたレスポンスが使用されます。ただし、予期しないエラーが発生したために、キャッシュに保存されたレスポンスが存在しない場合は、代わりにネットワーク レスポンスが使用されます。

precacheAndRoute() または addRoute() を呼び出す順序は重要です。通常は、registerRoute() で追加のルートを登録する前に、Service Worker ファイルの早い段階で呼び出します。最初に registerRoute() を呼び出し、そのルートが受信リクエストと一致した場合は、workbox-precaching で使用されるキャッシュ ファーストの戦略ではなく、その追加ルートで定義した戦略が応答に使用されます。

プリキャッシュ リストの説明

workbox-precaching には、url プロパティと revision プロパティを持つオブジェクトの配列が必要です。この配列は、プレキャッシュ マニフェストと呼ばれることもあります。

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute([
  {url: '/index.html', revision: '383676'},
  {url: '/styles/app.0c9a31.css', revision: null},
  {url: '/scripts/app.0d5770.js', revision: null},
  // ... other entries ...
]);

このリストは一連の URL を参照しており、それぞれに独自の「リビジョン」情報が含まれています。

上記の例の 2 番目と 3 番目のオブジェクトでは、revision プロパティは null に設定されています。これは、リビジョン情報が URL 自体に含まれているためです。これは通常、静的アセットのベスト プラクティスです。

最初のオブジェクト(/index.html)は、リビジョン プロパティを明示的に設定します。リビジョン プロパティは、ファイルの内容の自動生成ハッシュです。JavaScript や CSS リソースとは異なり、HTML ファイルは通常、URL に改訂情報を含めることはできません。そうしないと、ページのコンテンツが変更されると、ウェブ上のこれらのファイルへのリンクが破損してしまいます。

Workbox は、リビジョン プロパティを precacheAndRoute() に渡すことで、ファイルの変更を認識し、それに応じてファイルを更新できます。

Workbox には、このリストの生成に役立つツールが付属しています。

  • workbox-build: これは、gulp タスクで、または npm 実行スクリプトとして使用できるノード パッケージです。
  • workbox-webpack-plugin: webpack ユーザーは、このプラグインを使用できます。
  • workbox-cli: CLI を使用してアセットのリストを生成し、Service Worker に追加することもできます。

事前キャッシュされたファイルの受信リクエスト

workbox-precaching は、事前キャッシュされたファイルを照合するために、受信ネットワーク リクエストを操作してすぐに使用できます。これは、ウェブ上の一般的な慣行に対応しています。

たとえば、/ のリクエストは通常、/index.html にあるファイルによって処理されます。

以下に、workbox-precaching がデフォルトで実行する操作と、その動作を変更する方法を示します。

URL パラメータを無視する

検索パラメータを使用したリクエストを変更して、特定の値またはすべての値を削除できます。

デフォルトでは、utm_ で始まる検索パラメータ、または fbclid と完全に一致する検索パラメータが削除されます。つまり、/about.html?utm_campaign=abcd のリクエストは、/about.html の事前キャッシュされたエントリで処理されます。

ignoreURLParametersMatching を使用して、別の検索パラメータ セットを無視できます。

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute(
  [
    {url: '/index.html', revision: '383676'},
    {url: '/styles/app.0c9a31.css', revision: null},
    {url: '/scripts/app.0d5770.js', revision: null},
  ],
  {
    // Ignore all URL parameters.
    ignoreURLParametersMatching: [/.*/],
  }
);

ディレクトリのインデックス

デフォルトでは、/ で終わるリクエストは、末尾に index.html が追加されたエントリと照合されます。つまり、/ の受信リクエストは、事前にキャッシュに保存されたエントリ /index.html で自動的に処理できます。

directoryIndex を設定することで、これを別のものに変更したり、完全に無効にしたりできます。

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute(
  [
    {url: '/index.html', revision: '383676'},
    {url: '/styles/app.0c9a31.css', revision: null},
    {url: '/scripts/app.0d5770.js', revision: null},
  ],
  {
    directoryIndex: null,
  }
);

クリーン URL

リクエストが事前キャッシュに一致しない場合は、末尾に .html が追加され、「クリーンな」URL(「プリティ」な URL)がサポートされます。つまり、/about のようなリクエストは、/about.html の事前キャッシュされたエントリによって処理されます。

この動作を無効にするには、cleanUrls を設定します。

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute([{url: '/about.html', revision: 'b79cd4'}], {
  cleanUrls: false,
});

カスタム操作

受信リクエストから事前キャッシュに保存されたアセットへのカスタム一致を定義する場合は、urlManipulation オプションを使用します。これは、一致する可能性のある配列を返すコールバックである必要があります。

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute(
  [
    {url: '/index.html', revision: '383676'},
    {url: '/styles/app.0c9a31.css', revision: null},
    {url: '/scripts/app.0d5770.js', revision: null},
  ],
  {
    urlManipulation: ({url}) => {
      // Your logic goes here...
      return [alteredUrlOption1, alteredUrlOption2];
    },
  }
);

高度な使用方法

PrecacheController の直接の使用

デフォルトでは、workbox-precachinginstall リスナーと activate リスナーを設定します。Service Worker になじみのあるデベロッパーにとって、より細かい制御が必要な場合は、これは望ましくありません。

デフォルトのエクスポートを使用する代わりに、PrecacheController を直接使用してアイテムをプリキャッシュに追加し、それらのアセットをインストールするタイミングとクリーンアップを行うタイミングを決定できます。

import {PrecacheController} from 'workbox-precaching';

const precacheController = new PrecacheController();
precacheController.addToCacheList([
  {url: '/styles/example-1.abcd.css', revision: null},
  {url: '/styles/example-2.1234.css', revision: null},
  {url: '/scripts/example-1.abcd.js', revision: null},
  {url: '/scripts/example-2.1234.js', revision: null},
]);

precacheController.addToCacheList([{
  url: '/index.html',
  revision: 'abcd',
}, {
  url: '/about.html',
  revision: '1234',
}]);

self.addEventListener('install', (event) => {
  // Passing in event is required in Workbox v6+
  event.waitUntil(precacheController.install(event));
});

self.addEventListener('activate', (event) => {
  // Passing in event is required in Workbox v6+
  event.waitUntil(precacheController.activate(event));
});

self.addEventListener('fetch', (event) => {
  const cacheKey = precacheController.getCacheKeyForURL(event.request.url);
  event.respondWith(caches.match(cacheKey).then(...));
});

事前キャッシュされたアセットを直接読み取る

workbox-precaching が自動的に実行できるルーティングのコンテキスト外で、事前キャッシュされたアセットを直接読み取る必要がある場合があります。たとえば、部分的な HTML テンプレートを事前キャッシュに保存して、完全なレスポンスを作成するときに取得して使用する必要があるとします。

一般に、Cache Storage API を使用して、事前キャッシュされた Response オブジェクトを取得できますが、注意点が 1 つあります。cache.match() の呼び出し時に使用する必要がある URL キャッシュキーに、workbox-precaching が自動的に作成して維持するバージョニング パラメータが含まれている場合があります。

正しいキャッシュキーを取得するには、getCacheKeyForURL() を呼び出して元の URL を渡し、その結果を使用して適切なキャッシュで cache.match() を実行します。

import {cacheNames} from 'workbox-core';
import {getCacheKeyForURL} from 'workbox-precaching';

const cache = await caches.open(cacheNames.precache);
const response = await cache.match(getCacheKeyForURL('/precached-file.html'));

または、事前にキャッシュに保存された Response オブジェクトのみが必要な場合は、matchPrecache() を呼び出すこともできます。これにより、適切なキャッシュキーが自動的に使用され、適切なキャッシュ内を検索できます。

import {matchPrecache} from 'workbox-precaching';

const response = await matchPrecache('/precached-file.html');

古いプリキャッシュのクリーンアップ

Workbox のほとんどのリリースでは、プリキャッシュ データを保存するための同じ形式が維持されています。通常、古いバージョンの Workbox で作成されたプリキャッシュは、新しいリリースでそのまま使用できます。まれに、ストレージのプレキャッシュに互換性を破る変更があり、既存のユーザーがすべてを再ダウンロードすることが必要になり、それによって以前にキャッシュしたデータが古くなります。(このような変更は Workbox v3 と v4 のリリースで行われています)。

この古いデータが通常のオペレーションの妨げになることはありませんが、全体的な保存容量の使用には影響するため、ユーザーが明示的にデータを削除しやすくなる可能性があります。そのためには、Service Worker に cleanupOutdatedCaches() を追加するか、Workbox のビルドツールのいずれかを使用して Service Worker を生成している場合は cleanupOutdatedCaches: true を設定します。

サブリソースの整合性の使用

デベロッパーによっては、事前キャッシュされた URL をネットワークから取得するときに、サブリソースの整合性の適用による追加の保証を必要とする場合があります。

integrity というオプションのプロパティをプリキャッシュ マニフェストの任意のエントリに追加できます。指定すると、キャッシュへのデータ入力に使用される Request を作成する際に、integrityとして使用されます。不一致があると、事前キャッシュ プロセスは失敗します。

どの事前キャッシュ マニフェスト エントリに integrity プロパティを含めるか、また適切な値を使用する方法については、Workbox のビルドツールの範囲外です。この機能にオプトインする場合は、Workbox が生成するプレキャッシュ マニフェストを変更して、適切な情報を自身で追加する必要があります。Workbox のビルドツール構成で manifestTransform オプションを使用すると、次のことができます。

const ssri = require('ssri');

const integrityManifestTransform = (originalManifest, compilation) => {
  const warnings = [];
  const manifest = originalManifest.map(entry => {
    // If some criteria match:
    if (entry.url.startsWith('...')) {
      // This has to be a synchronous function call, for example:
      // compilation will be set when using workbox-webpack-plugin.
      // When using workbox-build directly, you can read the file's
      // contents from disk using, e.g., the fs module.
      const asset = compilation.getAsset(entry.url);
      entry.integrity = ssri.fromData(asset.source.source()).toString();

      // Push a message to warnings if needed.
    }
    return entry;
  });

  return {warnings, manifest};
};

// Then add manifestTransform: [integrityManifestTransform]
// to your Workbox build configuration.

CleanupResult

プロパティ

  • deletedCacheRequests

    string[]

InstallResult

プロパティ

  • notUpdatedURLs

    string[]

  • updatedURLs

    string[]

PrecacheController

アセットの事前キャッシュを効率的に実行します。

プロパティ

  • コンストラクタ

    void

    新しい PrecacheController を作成します。

    constructor 関数は次のようになります。

    (options?: PrecacheControllerOptions) => {...}

    • オプション

      PrecacheControllerOptions 省略可

  • ストラテジー

    戦略

  • activate

    void

    現在のプリキャッシュ マニフェストに存在しないアセットを削除します。このメソッドは、Service Worker の activate イベントから呼び出します。

    注: このメソッドはユーザーに代わって event.waitUntil() を呼び出すため、イベント ハンドラ内で自身を呼び出す必要はありません。

    activate 関数は次のようになります。

    (event: ExtendableEvent) => {...}

    • event

      ExtendableEvent

  • addToCacheList

    void

    このメソッドによってアイテムが事前キャッシュ リストに追加され、重複が排除され、情報が有効であることが保証されます。

    addToCacheList 関数は次のようになります。

    (entries: (string | PrecacheEntry)[]) => {...}

    • entries

      (文字列 | PrecacheEntry)[]

      事前キャッシュに保存するエントリの配列。

  • createHandlerBoundToURL

    void

    リビジョン情報を考慮して、プリキャッシュ内の url を検索し、対応する Response を返す関数を返します。

    createHandlerBoundToURL 関数は次のようになります。

    (url: string) => {...}

    • url

      string

      Response の検索に使用される事前キャッシュされた URL。

  • getCacheKeyForURL

    void

    指定された URL の保存に使用されたキャッシュキーを返します。この URL が「/index.html」のようにバージョン付けされていない場合、キャッシュキーは、検索パラメータが付加された元の URL になります。

    getCacheKeyForURL 関数は次のようになります。

    (url: string) => {...}

    • url

      string

      キャッシュキーを検索する URL。

    • 戻り値

      string

      元の URL のキャッシュキーに対応するバージョニングされた URL。URL が事前キャッシュに保存されていない場合は未定義になります。

  • getCachedURLs

    void

    現在の Service Worker によって事前にキャッシュに保存されたすべての URL のリストを返します。

    getCachedURLs 関数は次のようになります。

    () => {...}

    • 戻り値

      string[]

      事前キャッシュされた URL。

  • getIntegrityForCacheKey

    void

    getIntegrityForCacheKey 関数は次のようになります。

    (cacheKey: string) => {...}

    • cacheKey

      string

    • 戻り値

      string

      キャッシュキーに関連付けられているサブリソースの整合性。設定されていない場合は未定義になります。

  • getURLsToCacheKeys

    void

    URL のリビジョン情報を考慮して、事前キャッシュされた URL から対応するキャッシュキーへのマッピングを返します。

    getURLsToCacheKeys 関数は次のようになります。

    () => {...}

    • 戻り値

      マップ<文字列>

      キャッシュキーのマッピングへの URL。

  • インストール

    void

    新しいアセットと更新されたアセットを事前キャッシュに保存します。このメソッドは、Service Worker のインストール イベントから呼び出します。

    注: このメソッドはユーザーに代わって event.waitUntil() を呼び出すため、イベント ハンドラ内で自身を呼び出す必要はありません。

    install 関数は次のようになります。

    (event: ExtendableEvent) => {...}

    • event

      ExtendableEvent

  • matchPrecache

    void

    これは cache.match() の代わりに使用できますが、次の点が異なります。

    • 事前キャッシュの名前がわかっているので、そのキャッシュだけをチェックします。
    • バージョニング パラメータなしで「元の」URL を渡すと、その URL の現在アクティブなリビジョンの正しいキャッシュキーが自動的に検索されます。

    例: matchPrecache('index.html') は、実際のキャッシュキーが '/index.html?__WB_REVISION__=1234abcd' であっても、現在アクティブな Service Worker の正しいプリキャッシュ レスポンスを見つけます。

    matchPrecache 関数は次のようになります。

    (request: string | Request) => {...}

    • request

      string | リクエスト

      プリキャッシュ内で検索するキー(リビジョン パラメータなし)。

    • 戻り値

      Promise<Response>

  • 事前キャッシュ

    void

    Service Worker のインストール時に、アイテムを事前キャッシュ リストに追加して重複を削除し、ファイルをキャッシュに保存します。

    このメソッドは複数回呼び出すことができます。

    precache 関数は次のようになります。

    (entries: (string | PrecacheEntry)[]) => {...}

PrecacheEntry

プロパティ

  • 完全性

    string(省略可)

  • リビジョン

    string(省略可)

  • url

    string

PrecacheFallbackPlugin

PrecacheFallbackPlugin を使用すると、特定の戦略でレスポンスを生成できない場合に使用する「オフライン フォールバック」レスポンスを指定できます。

これは、handlerDidError プラグインのコールバックをインターセプトして、事前にキャッシュに保存されたレスポンスを返すことで、想定されるリビジョン パラメータを自動的に考慮して行います。

コンストラクタに PrecacheController インスタンスを明示的に渡さない限り、デフォルトのインスタンスが使用されます。一般的に、ほとんどのデベロッパーは最終的にデフォルトを使用します。

プロパティ

  • コンストラクタ

    void

    関連する代替 URL を使用して新しい PrecacheFallbackPlugin を構築します。

    constructor 関数は次のようになります。

    (config: object) => {...}

    • config

      オブジェクト

      • fallbackURL

        string

        関連付けられた戦略でレスポンスを生成できない場合にフォールバックとして使用する事前キャッシュ済み URL。

      • precacheController

PrecacheRoute

workbox-routing.Route のサブクラス。workbox-precaching.PrecacheController インスタンスを受け取り、それを使用して受信リクエストを照合し、プレキャッシュからのレスポンスの取得を処理します。

プロパティ

PrecacheRouteOptions

プロパティ

  • cleanURLs

    ブール値(省略可)

  • directoryIndex

    string(省略可)

  • ignoreURLParametersMatching

    RegExp[](省略可)

  • urlManipulation

    urlManipulation 省略可

PrecacheStrategy

workbox-precaching.PrecacheController と連携して、事前にキャッシュに保存されたアセットのキャッシュと取得の両方を行うように設計された workbox-strategies.Strategy 実装。

注: このクラスのインスタンスは、PrecacheController を作成すると自動的に作成されます。通常は、自分で作成する必要はありません。

プロパティ

  • コンストラクタ

    void

    constructor 関数は次のようになります。

    (options?: PrecacheStrategyOptions) => {...}

    • オプション

      PrecacheStrategyOptions 省略可

  • cacheName

    string

  • fetchOptions

    RequestInit(省略可)

  • matchOptions

    CacheQueryOptions 省略可

  • プラグイン
  • copyRedirectedCacheableResponsesPlugin
  • defaultPrecacheCacheabilityPlugin
  • _完了待ち

    void

    _awaitComplete 関数は次のようになります。

    (responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • responseDone

      Promise<Response>

    • handler
    • request

      リクエスト

    • event

      ExtendableEvent

    • 戻り値

      Promise<void>

  • _getResponse

    void

    _getResponse 関数は次のようになります。

    (handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • 戻り値

      Promise<Response>

  • _handleFetch

    void

    _handleFetch 関数は次のようになります。

    (request: Request, handler: StrategyHandler) => {...}

    • 戻り値

      Promise<Response>

  • _handleInstall

    void

    _handleInstall 関数は次のようになります。

    (request: Request, handler: StrategyHandler) => {...}

    • 戻り値

      Promise<Response>

  • handle

    void

    リクエスト戦略を実行し、Response で解決される Promise を返します。関連するすべてのプラグイン コールバックを呼び出します。

    戦略インスタンスがワークボックス workbox-routing.Route に登録されている場合、ルートが一致すると、このメソッドが自動的に呼び出されます。

    または、このメソッドを event.respondWith() に渡すことで、スタンドアロンの FetchEvent リスナーで使用することもできます。

    handle 関数は次のようになります。

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • オプション

      FetchEvent | HandlerCallbackOptions

      下記のプロパティを持つ FetchEvent またはオブジェクト。

    • 戻り値

      Promise<Response>

  • handleAll

    void

    workbox-strategies.Strategy~handle と似ていますが、単に Response に解決される Promise を返すのではなく、[response, done] Promise のタプルを返します。前者(response)は handle() が返すものと等しく、後者は戦略実行の一環として event.waitUntil() に追加された Promise が完了すると解決される Promise です。

    done Promise を待機して、戦略によって実行された追加の作業(通常はレスポンスのキャッシュ保存)が正常に完了したことを確認します。

    handleAll 関数は次のようになります。

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • オプション

      FetchEvent | HandlerCallbackOptions

      下記のプロパティを持つ FetchEvent またはオブジェクト。

    • 戻り値

      [Promise<Response>, Promise<void>]

      [response, Done] のタプルは、レスポンスが解決されるタイミングと、ハンドラがすべての処理を完了したタイミングを判断するために使用できます。

urlManipulation()

workbox-precaching.urlManipulation(
  { url }: object,
)

タイプ

機能

パラメータ

  • { URL }

    オブジェクト

    • url

      URL

戻り値

  • URL[]

メソッド

addPlugins()

workbox-precaching.addPlugins(
  plugins: WorkboxPlugin[],
)

プリキャッシュ戦略にプラグインを追加します。

パラメータ

addRoute()

workbox-precaching.addRoute(
  options?: PrecacheRouteOptions,
)

事前キャッシュされたアセットで [ネットワーク リクエスト]https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers#Custom_responses_to_requests に応答する fetch リスナーを Service Worker に追加します。

事前キャッシュされていないアセットのリクエストには、FetchEvent には応答しないため、イベントは他の fetch イベント リスナーにフォールバックできます。

パラメータ

cleanupOutdatedCaches()

workbox-precaching.cleanupOutdatedCaches()

activate イベント リスナーが追加され、古いバージョンの Workbox で作成された互換性のないプリキャッシュをクリーンアップします。

createHandlerBoundToURL()

workbox-precaching.createHandlerBoundToURL(
  url: string,
)

デフォルトの PrecacheController インスタンスで PrecacheController#createHandlerBoundToURL を呼び出すヘルパー関数。

独自の PrecacheController を作成する場合は、この関数を使用する代わりに、そのインスタンスで PrecacheController#createHandlerBoundToURL を呼び出します。

パラメータ

  • url

    string

    Response の検索に使用される事前キャッシュされた URL。

getCacheKeyForURL()

workbox-precaching.getCacheKeyForURL(
  url: string,
)

URL を受け取って、プレキャッシュ内のエントリの検索に使用できる対応する URL を返します。

相対 URL を指定すると、Service Worker ファイルの場所がベースとして使用されます。

リビジョン情報のない事前キャッシュに保存されたエントリの場合、キャッシュキーは元の URL と同じになります。

リビジョン情報がある事前キャッシュに保存されたエントリの場合、キャッシュキーは元の URL に、リビジョン情報の追跡に使用されるクエリ パラメータが追加されたものになります。

パラメータ

  • url

    string

    キャッシュキーを検索する URL。

戻り値

  • 文字列 | 未定義

    その URL に対応するキャッシュキー。

matchPrecache()

workbox-precaching.matchPrecache(
  request: string | Request,
)

デフォルトの PrecacheController インスタンスで PrecacheController#matchPrecache を呼び出すヘルパー関数。

独自の PrecacheController を作成する場合は、この関数を使用する代わりに、そのインスタンスで PrecacheController#matchPrecache を呼び出します。

パラメータ

  • request

    string | リクエスト

    プリキャッシュ内で検索するキー(リビジョン パラメータなし)。

戻り値

  • Promise<Response | undefined>

precache()

workbox-precaching.precache(
  entries: (string | PrecacheEntry)[],
)

Service Worker のインストール時に、アイテムを事前キャッシュ リストに追加して重複を削除し、ファイルをキャッシュに保存します。

このメソッドは複数回呼び出すことができます。

注: この方法では、キャッシュ ファイルは提供されません。 ファイルの事前キャッシュのみを行います。ネットワーク リクエストに応答するには、workbox-precaching.addRoute を呼び出します。

事前キャッシュに保存するファイルの配列が 1 つだけの場合は、workbox-precaching.precacheAndRoute を呼び出すだけで済みます。

パラメータ

precacheAndRoute()

workbox-precaching.precacheAndRoute(
  entries: (string | PrecacheEntry)[],
  options?: PrecacheRouteOptions,
)

このメソッドは、事前キャッシュ リストにエントリを追加し、フェッチ イベントに応答するルートを追加します。

これは、1 回の呼び出しで workbox-precaching.precacheworkbox-precaching.addRoute を呼び出す便利なメソッドです。

パラメータ