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

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

Service Worker の機能の 1 つは、Service Worker のインストール時に一連のファイルをキャッシュに保存できることです。これは、サービスワーカーの使用前にコンテンツをキャッシュに保存するため、「プリキャッシュ」と呼ばれます。

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

Workbox は、API を簡素化し、アセットが効率的にダウンロードされるようにすることで、事前キャッシュに伴う負担を大幅に軽減します。

workbox-precaching の仕組み

ウェブアプリが初めて読み込まれると、workbox-precaching はダウンロードするすべてのアセットを確認し、重複を削除して、関連するサービスワーカーイベントをフックし、アセットをダウンロードして保存します。バージョニング情報（コンテンツハッシュなど）がすでに含まれている URL は、変更なしでキャッシュキーとして使用されます。バージョニング情報が含まれていない URL には、Workbox がビルド時に生成するコンテンツのハッシュを表す追加の URL クエリパラメータがキャッシュキーに追加されます。

workbox-precaching は、サービスワーカーの install イベント中にこれらすべてを行います。

ユーザーが後でウェブアプリに再アクセスしたときに、異なるプリキャッシュアセットを持つ新しいサービスワーカーが存在する場合、workbox-precaching は新しいリストを確認し、リビジョンに基づいて、完全に新しいアセットと、更新が必要な既存のアセットを判断します。新しいアセットや更新リビジョンは、新しいサービスワーカーの install イベント中にキャッシュに追加されます。

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

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 にリビジョン情報を含めることはできません。含めると、ページのコンテンツが変更されるたびに、ウェブ上のこれらのファイルへのリンクが切断されます。

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

注: 以前のバージョンの workbox-precaching では、プリキャッシュマニフェストに、url プロパティと revision プロパティを持つオブジェクトに加えて、文字列 URL を含めることができます。バージョン 5 では非推奨になりました。今後は、常にオブジェクトを渡す必要があります。また、Workbox がキャッシュ内の URL をリビジョンしないようにするには、revision プロパティを明示的に null に設定する必要があります。バージョン 5 では文字列を渡すことは引き続き（警告付きで）機能しますが、バージョン 6 ではサポートされなくなります。

Workbox には、このリストの生成に役立つツールが用意されています。

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

プリキャッシュファイルの受信リクエスト

workbox-precaching がすぐに実行する処理の 1 つは、受信したネットワークリクエストを操作して、プリキャッシュに保存されたファイルとの一致を試みることです。これは、ウェブ上の一般的な方法に対応しています。

たとえば、通常、/ のリクエストは /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-precaching によって install リスナーと activate リスナーが設定されます。サービスワーカーに精通しているデベロッパーにとって、より細かい制御が必要な場合は、この方法は望ましくありません。

デフォルトのエクスポートを使用する代わりに、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 が自動的に作成して維持するバージョニングパラメータが含まれている可能性があります。

正しいキャッシュキーを取得するには、元の URL を渡して getCacheKeyForURL() を呼び出し、その結果を使用して適切なキャッシュに対して 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');

注: 独自の PrecacheController インスタンスを使用している場合は、precacheAndRoute を介してデフォルトインスタンスを使用するのではなく、そのインスタンスで matchPrecache() メソッドまたは getCacheKeyForURL() メソッドを直接呼び出す必要があります。

古いプリキャッシュをクリーンアップする

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

この古いデータは通常の運用に支障をきたすことはありませんが、ストレージクォータの全体的な使用量に影響します。明示的に削除すると、ユーザーにとっても便利です。そのためには、サービスワーカーに cleanupOutdatedCaches() を追加するか、Workbox のビルドツールのいずれかを使用してサービスワーカーを生成する場合は 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（省略可）
- 戻り値
  PrecacheController
ストラテジー

戦略
activate

void

現在のプリキャッシュマニフェストに存在しないアセットを削除します。このメソッドは、サービスワーカーのアクティベーションイベントから呼び出します。

注: このメソッドは event.waitUntil() を自動的に呼び出すため、イベントハンドラで自分で呼び出す必要はありません。

activate 関数は次のようになります。
```
(event: ExtendableEvent) => {...}
```
- イベント
  
  ExtendableEvent
- 戻り値
  Promise<CleanupResult>
addToCacheList

void

この方法では、アイテムをプリキャッシュリストに追加し、重複を削除して、情報が有効であることを確認します。

addToCacheList 関数は次のようになります。
```
(entries: (string | PrecacheEntry)[]) => {...}
```
- entries
  
  （文字列 | PrecacheEntry）[]
  
  プリキャッシュするエントリの配列。
createHandlerBoundToURL

void

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

createHandlerBoundToURL 関数は次のようになります。
```
(url: string) => {...}
```
- URL
  
  文字列
  
  Response の検索に使用されるプリキャッシュ URL。
- 戻り値
  RouteHandlerCallback
getCacheKeyForURL

void

特定の URL の保存に使用されたキャッシュキーを返します。その URL がバージョンなし（「/index.html」など）の場合、キャッシュキーは検索パラメータが追加された元の URL になります。

getCacheKeyForURL 関数は次のようになります。
```
(url: string) => {...}
```
- URL
  
  文字列
  
  キャッシュキーを検索する URL。
- 戻り値
  文字列
  
  元の URL のキャッシュキーに対応するバージョニングされた URL。その URL がプリキャッシュされていない場合は未定義です。
getCachedURLs

void

現在のサービスワーカーによってプリキャッシュされたすべての URL のリストを返します。

getCachedURLs 関数は次のようになります。
```
() => {...}
```
- 戻り値
  string[]
  
  プリキャッシュされた URL。
getIntegrityForCacheKey

void

getIntegrityForCacheKey 関数は次のようになります。
```
(cacheKey: string) => {...}
```
- cacheKey
  
  文字列
- 戻り値
  文字列
  
  キャッシュキーに関連付けられたサブリソースの完全性。設定されていない場合は未定義です。
getURLsToCacheKeys

void

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

getURLsToCacheKeys 関数は次のようになります。
```
() => {...}
```
- 戻り値
  Map<stringstring>
  
  キーマッピングをキャッシュに保存する URL。
インストール

void

新規および更新されたアセットをプリキャッシュします。このメソッドは、サービスワーカーのインストールイベントから呼び出します。

注: このメソッドは event.waitUntil() を自動的に呼び出すため、イベントハンドラで自分で呼び出す必要はありません。

install 関数は次のようになります。
```
(event: ExtendableEvent) => {...}
```
- イベント
  
  ExtendableEvent
- 戻り値
  Promise<InstallResult>
matchPrecache

void

これは cache.match() の代替として使用できますが、次の点が異なります。
- プリキャッシュの名前を認識し、そのキャッシュのみをチェックインします。
- バージョニングパラメータなしで「元の」URL を渡すことができ、その URL の現在アクティブなリビジョンの正しいキャッシュキーが自動的に検索されます。
例: matchPrecache('index.html') は、実際のキャッシュキーが '/index.html?__WB_REVISION__=1234abcd' であっても、現在アクティブな Service Worker の正しいプリキャッシュレスポンスを検出します。

matchPrecache 関数は次のようになります。
```
(request: string | Request) => {...}
```
- リクエスト
  
  文字列 | リクエスト
  
  プリキャッシュで検索するキー（リビジョンパラメータなし）。
- 戻り値
  Promise<Response>
precache

void

サービスワーカーがインストールされると、アイテムをプリキャッシュリストに追加し、重複を削除してファイルをキャッシュに保存します」

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

precache 関数は次のようになります。
```
(entries: (string | PrecacheEntry)[]) => {...}
```
- entries
  
  （文字列 | PrecacheEntry）[]

PrecacheEntry

プロパティ

完全性

文字列省略可
リビジョン

文字列省略可
URL

文字列

PrecacheFallbackPlugin

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

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

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

プロパティ

コンストラクタ

void

関連付けられた fallbackURL を使用して新しい PrecacheFallbackPlugin を構築します。

constructor 関数は次のようになります。
```
(config: object) => {...}
```
- config
  
  オブジェクト
  - fallbackURL
    
    文字列
    
    関連付けられた戦略でレスポンスを生成できない場合に、フォールバックとして使用するプリキャッシュ URL。
  - precacheController
    
    PrecacheController（省略可）
- 戻り値
  PrecacheFallbackPlugin

PrecacheRoute

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

プロパティ

コンストラクタ

void

constructor 関数は次のようになります。
```
(precacheController: PrecacheController, options?: PrecacheRouteOptions) => {...}
```
- precacheController
  
  PrecacheController
  
  リクエストのマッチングとフェッチイベントへの応答の両方に使用される PrecacheController インスタンス。
- オプション
  
  PrecacheRouteOptions（省略可）
- 戻り値
  PrecacheRoute
catchHandler

RouteHandlerObject 省略可
handler

RouteHandlerObject
一致

RouteMatchCallback
method

HTTPMethod
setCatchHandler

void

setCatchHandler 関数は次のようになります。
```
(handler: RouteHandler) => {...}
```
- handler
  
  RouteHandler
  
  Response に解決する Promise を返すコールバック関数

PrecacheRouteOptions

プロパティ

cleanURLs

ブール値（省略可）
directoryIndex

文字列省略可
ignoreURLParametersMatching

RegExp[] 省略可
urlManipulation

urlManipulation（省略可）

PrecacheStrategy

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

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

プロパティ

コンストラクタ

void

constructor 関数は次のようになります。
```
(options?: PrecacheStrategyOptions) => {...}
```
- オプション
  
  PrecacheStrategyOptions（省略可）
- 戻り値
  PrecacheStrategy
cacheName

文字列
fetchOptions

RequestInit（省略可）
matchOptions

CacheQueryOptions（省略可）
プラグイン

WorkboxPlugin[]
copyRedirectedCacheableResponsesPlugin

WorkboxPlugin
defaultPrecacheCacheabilityPlugin

WorkboxPlugin
_awaitComplete

void

_awaitComplete 関数は次のようになります。
```
(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
```
- responseDone
  
  Promise<Response>
- handler
  
  StrategyHandler
- リクエスト
  
  リクエスト
- イベント
  
  ExtendableEvent
- 戻り値
  Promise<void>
_getResponse

void

_getResponse 関数は次のようになります。
```
(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
```
- handler
  
  StrategyHandler
- リクエスト
  
  リクエスト
- イベント
  
  ExtendableEvent
- 戻り値
  Promise<Response>
_handleFetch

void

_handleFetch 関数は次のようになります。
```
(request: Request, handler: StrategyHandler) => {...}
```
- リクエスト
  
  リクエスト
- handler
  
  StrategyHandler
- 戻り値
  Promise<Response>
_handleInstall

void

_handleInstall 関数は次のようになります。
```
(request: Request, handler: StrategyHandler) => {...}
```
- リクエスト
  
  リクエスト
- handler
  
  StrategyHandler
- 戻り値
  Promise<Response>
ハンドル

void

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

戦略インスタンスが Workbox の 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 の Tuple を返します。前者（response）は handle() が返すものに相当し、後者は、戦略の実行の一環として event.waitUntil() に追加された Promise が完了すると解決する Promise です。

done プロミスを待機して、戦略によって実行される追加作業（通常はレスポンスのキャッシュ保存）が正常に完了することを確認できます。

handleAll 関数は次のようになります。
```
(options: FetchEvent | HandlerCallbackOptions) => {...}
```
- オプション
  
  FetchEvent | HandlerCallbackOptions
  
  FetchEvent または、次のプロパティを持つオブジェクト。
- 戻り値
  [Promise<Response>, Promise<void>]
  
  [response, done] の Promise のタプル。レスポンスが解決したときや、ハンドラがすべての処理を完了したときに使用できます。

urlManipulation()

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

タイプ

関数

パラメータ

{ url }

オブジェクト
- URL
  
  URL

戻り値

URL[]

メソッド

addPlugins()

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

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

パラメータ

プラグイン

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 イベントリスナーにフォールスルーします。

パラメータ

オプション

PrecacheRouteOptions（省略可）

cleanupOutdatedCaches()

workbox-precaching.cleanupOutdatedCaches()

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

createHandlerBoundToURL()

workbox-precaching.createHandlerBoundToURL(
  url: string,
)

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

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

パラメータ

URL

文字列

Response の検索に使用されるプリキャッシュ URL。

戻り値

RouteHandlerCallback

getCacheKeyForURL()

workbox-precaching.getCacheKeyForURL(
  url: string,
)

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

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

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

リビジョン情報を含むプリキャッシュエントリの場合、キャッシュキーは元の URL に、リビジョン情報の追跡に使用されるクエリパラメータが追加されたものです。

パラメータ

URL

文字列

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

戻り値

文字列 | 未定義

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

matchPrecache()

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

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

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

パラメータ

リクエスト

文字列 | リクエスト

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

戻り値

Promise<Response | undefined>

precache()

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

サービスワーカーがインストールされると、アイテムをプリキャッシュリストに追加し、重複を削除してファイルをキャッシュに保存します」

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

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

プリキャッシュするファイルが 1 つの配列にある場合は、workbox-precaching.precacheAndRoute を呼び出すだけです。

パラメータ

entries

（文字列 | PrecacheEntry）[]

precacheAndRoute()

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

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

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

パラメータ

entries

（文字列 | PrecacheEntry）[]

プリキャッシュするエントリの配列。
オプション

PrecacheRouteOptions（省略可）

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

workbox-precaching の仕組み

プリキャッシュされたレスポンスの提供

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

プリキャッシュ ファイルの受信リクエスト

URL パラメータを無視する

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

クリーン URL

カスタム操作

高度な使用

PrecacheController を直接使用する

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

古いプリキャッシュをクリーンアップする

サブリソースの完全性を使用する

型

CleanupResult

プロパティ

InstallResult

プロパティ

PrecacheController

プロパティ

PrecacheEntry

プロパティ

PrecacheFallbackPlugin

プロパティ

PrecacheRoute

プロパティ

PrecacheRouteOptions

プロパティ

PrecacheStrategy

プロパティ

urlManipulation()

タイプ

パラメータ

戻り値

メソッド

addPlugins()

パラメータ

addRoute()

パラメータ

cleanupOutdatedCaches()

createHandlerBoundToURL()

パラメータ

戻り値

getCacheKeyForURL()

パラメータ

戻り値

matchPrecache()

パラメータ

戻り値

precache()

パラメータ

precacheAndRoute()

パラメータ

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

プリキャッシュファイルの受信リクエスト

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