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 には、このリストの生成に役立つツールが用意されています。
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');
古いプリキャッシュをクリーンアップする
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(省略可)
-
- ストラテジー
戦略
- 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。
-
- 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(省略可)
-
-
PrecacheRoute
workbox-routing.Route
のサブクラス。workbox-precaching.PrecacheController
インスタンスを受け取り、受信リクエストを照合し、プリキャッシュからのレスポンスの取得を処理します。
プロパティ
- コンストラクタ
void
constructor
関数は次のようになります。(precacheController: PrecacheController, options?: PrecacheRouteOptions) => {...}
- precacheController
リクエストのマッチングとフェッチ イベントへの応答の両方に使用される
PrecacheController
インスタンス。 - オプション
PrecacheRouteOptions(省略可)
-
- catchHandler
- handler
- method
HTTPMethod
- setCatchHandler
void
setCatchHandler
関数は次のようになります。(handler: RouteHandler) => {...}
- handler
Response に解決する Promise を返すコールバック関数
-
PrecacheRouteOptions
プロパティ
- cleanURLs
ブール値(省略可)
- directoryIndex
文字列 省略可
- ignoreURLParametersMatching
RegExp[] 省略可
- urlManipulation
urlManipulation(省略可)
PrecacheStrategy
workbox-precaching.PrecacheController
と連携して、事前キャッシュに保存されたアセットのキャッシュ保存と取得の両方を行えるように特別に設計された workbox-strategies.Strategy
実装。
注: このクラスのインスタンスは、PrecacheController
の作成時に自動的に作成されます。通常、自分で作成する必要はありません。
プロパティ
- コンストラクタ
void
constructor
関数は次のようになります。(options?: PrecacheStrategyOptions) => {...}
- オプション
PrecacheStrategyOptions(省略可)
-
- cacheName
文字列
- fetchOptions
RequestInit(省略可)
- matchOptions
CacheQueryOptions(省略可)
- プラグイン
- copyRedirectedCacheableResponsesPlugin
- defaultPrecacheCacheabilityPlugin
- _awaitComplete
void
_awaitComplete
関数は次のようになります。(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
- responseDone
Promise<Response>
- handler
- リクエスト
リクエスト
- イベント
ExtendableEvent
- 戻り値
Promise<void>
-
- _getResponse
void
_getResponse
関数は次のようになります。(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
- handler
- リクエスト
リクエスト
- イベント
ExtendableEvent
- 戻り値
Promise<Response>
-
- _handleFetch
void
_handleFetch
関数は次のようになります。(request: Request, handler: StrategyHandler) => {...}
- リクエスト
リクエスト
- handler
- 戻り値
Promise<Response>
-
- _handleInstall
void
_handleInstall
関数は次のようになります。(request: Request, handler: StrategyHandler) => {...}
- リクエスト
リクエスト
- handler
- 戻り値
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
-
戻り値
-
URL[]
メソッド
パラメータ
- プラグイン
addRoute()
workbox-precaching.addRoute(
options?: PrecacheRouteOptions,
): void
プリキャッシュされたアセットで [ネットワーク リクエスト]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(): void
古いバージョンの Workbox によって作成された互換性のないプリキャッシュをクリーンアップする activate
イベント リスナーを追加しました。
createHandlerBoundToURL()
workbox-precaching.createHandlerBoundToURL(
url: string,
): RouteHandlerCallback
デフォルトの PrecacheController
インスタンスで PrecacheController#createHandlerBoundToURL
を呼び出すヘルパー関数。
独自の PrecacheController
を作成する場合は、この関数を使用する代わりに、そのインスタンスで PrecacheController#createHandlerBoundToURL
を呼び出します。
パラメータ
- URL
文字列
Response
の検索に使用されるプリキャッシュ URL。
getCacheKeyForURL()
workbox-precaching.getCacheKeyForURL(
url: string,
): string | undefined
URL を受け取り、プリキャッシュ内のエントリの検索に使用できる対応する URL を返します。
相対 URL が指定されている場合、Service Worker ファイルの場所がベースとして使用されます。
リビジョン情報のないプリキャッシュ エントリの場合、キャッシュキーは元の URL と同じになります。
リビジョン情報を含むプリキャッシュ エントリの場合、キャッシュキーは元の URL に、リビジョン情報の追跡に使用されるクエリ パラメータが追加されたものです。
パラメータ
- URL
文字列
キャッシュキーを検索する URL。
戻り値
-
文字列 | 未定義
その URL に対応するキャッシュキー。
matchPrecache()
workbox-precaching.matchPrecache(
request: string | Request,
): Promise<Response | undefined>
デフォルトの PrecacheController
インスタンスで PrecacheController#matchPrecache
を呼び出すヘルパー関数。
独自の PrecacheController
を作成する場合は、この関数を使用する代わりに、そのインスタンスで PrecacheController#matchPrecache
を呼び出します。
パラメータ
- リクエスト
文字列 | リクエスト
プリキャッシュで検索するキー(リビジョン パラメータなし)。
戻り値
-
Promise<Response | undefined>
precache()
workbox-precaching.precache(
entries: (string | PrecacheEntry)[],
): void
サービス ワーカーがインストールされると、アイテムをプリキャッシュ リストに追加し、重複を削除してファイルをキャッシュに保存します」
このメソッドは複数回呼び出すことができます。
注: この方法では、キャッシュに保存されたファイルは配信されません。ファイルのみをプリキャッシュします。ネットワーク リクエストに応答するには、workbox-precaching.addRoute
を呼び出します。
プリキャッシュするファイルが 1 つの配列にある場合は、workbox-precaching.precacheAndRoute
を呼び出すだけです。
パラメータ
- entries
(文字列 | PrecacheEntry)[]
precacheAndRoute()
workbox-precaching.precacheAndRoute(
entries: (string | PrecacheEntry)[],
options?: PrecacheRouteOptions,
): void
このメソッドは、プリキャッシュ リストにエントリを追加し、フェッチ イベントに応答するルートを追加します。
これは、workbox-precaching.precache
と workbox-precaching.addRoute
を 1 回の呼び出しで呼び出す便利なメソッドです。
パラメータ
- entries
(文字列 | PrecacheEntry)[]
プリキャッシュするエントリの配列。
- オプション
PrecacheRouteOptions(省略可)