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

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

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

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-precaching は install リスナーと 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');

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

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

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 省略可
- 戻り値
  PrecacheController
ストラテジー

戦略
activate

void

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

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

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

void

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

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

void

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

createHandlerBoundToURL 関数は次のようになります。
```
(url: string) => {...}
```
- url
  
  string
  
  Response の検索に使用される事前キャッシュされた URL。
- 戻り値
  RouteHandlerCallback
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
- 戻り値
  Promise<InstallResult>
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)[]) => {...}
```
- entries
  
  (文字列 | PrecacheEntry)[]

PrecacheEntry

プロパティ

完全性

string（省略可）
リビジョン

string（省略可）
url

string

PrecacheFallbackPlugin

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

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

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

プロパティ

コンストラクタ

void

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

constructor 関数は次のようになります。
```
(config: object) => {...}
```
- config
  
  オブジェクト
  - fallbackURL
    
    string
    
    関連付けられた戦略でレスポンスを生成できない場合にフォールバックとして使用する事前キャッシュ済み 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
  
  レスポンスに解決する Promise を返すコールバック関数

PrecacheRouteOptions

プロパティ

cleanURLs

ブール値（省略可）
directoryIndex

string（省略可）
ignoreURLParametersMatching

RegExp[]（省略可）
urlManipulation

urlManipulation 省略可

PrecacheStrategy

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

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

プロパティ

コンストラクタ

void

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

string
fetchOptions

RequestInit（省略可）
matchOptions

CacheQueryOptions 省略可
プラグイン

WorkboxPlugin[]
copyRedirectedCacheableResponsesPlugin

WorkboxPlugin
defaultPrecacheCacheabilityPlugin

WorkboxPlugin
_完了待ち

void

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

void

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

void

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

void

_handleInstall 関数は次のようになります。
```
(request: Request, handler: StrategyHandler) => {...}
```
- 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[],
)

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

パラメータ

プラグイン

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()

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

createHandlerBoundToURL()

workbox-precaching.createHandlerBoundToURL(
  url: string,
)

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

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

パラメータ

url

string

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

戻り値

RouteHandlerCallback

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 を呼び出すだけで済みます。

パラメータ

entries

(文字列 | PrecacheEntry)[]

precacheAndRoute()

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

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

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

パラメータ

entries

(文字列 | PrecacheEntry)[]

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

PrecacheRouteOptions 省略可

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

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

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

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

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

URL パラメータを無視する

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

クリーン URL

カスタム操作

高度な使用方法

PrecacheController の直接の使用

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

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

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

型

CleanupResult

プロパティ

InstallResult

プロパティ

PrecacheController

プロパティ

PrecacheEntry

プロパティ

PrecacheFallbackPlugin

プロパティ

PrecacheRoute

プロパティ

PrecacheRouteOptions

プロパティ

PrecacheStrategy

プロパティ

urlManipulation()

タイプ

パラメータ

戻り値

メソッド

addPlugins()

パラメータ

addRoute()

パラメータ

cleanupOutdatedCaches()

createHandlerBoundToURL()

パラメータ

戻り値

getCacheKeyForURL()

パラメータ

戻り値

matchPrecache()

パラメータ

戻り値

precache()

パラメータ

precacheAndRoute()

パラメータ

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