ウェブ アプリケーションのアセットの中には、使用頻度が低いアセットや、非常に大きいアセット、ユーザーのデバイス（レスポンシブ画像など）や言語によって異なるものがあります。そのようなインスタンスではプレキャッシュがアンチパターンとなるため、ランタイム キャッシュを利用する必要があります。
Workbox では、workbox-routing モジュールを使用してルートの照合を使用してアセットのランタイム キャッシュを処理し、workbox-strategies モジュールを使用してキャッシュ戦略を処理できます。
キャッシュ戦略
組み込みのキャッシュ戦略のいずれかを使用して、アセットのほとんどのルートを処理できます。詳細についてはこのドキュメントですでに説明しましたが、ここではその一部をまとめます。
- 再検証中に失効する: リクエストに対してキャッシュされたレスポンス（利用可能な場合）を使用し、ネットワークからのレスポンスによってバックグラウンドでキャッシュを更新します。そのため、アセットがキャッシュに保存されていない場合、ネットワーク レスポンスを待ってそれを使用します。これに依存するキャッシュ エントリが定期的に更新されるため、非常に安全な戦略です。この方法の短所は、常にバックグラウンドでネットワークからアセットをリクエストすることです。
- ネットワーク ファーストでは、まずネットワークから応答を得ようとします。レスポンスを受信すると、そのレスポンスをブラウザに渡し、キャッシュに保存します。ネットワーク リクエストが失敗した場合は、最後にキャッシュされたレスポンスが使用され、アセットへのオフライン アクセスが有効になります。
- キャッシュ ファーストは、まずキャッシュ内のレスポンスを確認し、レスポンスがあればそれを使用します。リクエストがキャッシュにない場合は、ネットワークが使用され、有効なレスポンスはブラウザに渡される前にキャッシュに追加されます。
- ネットワークのみでは、強制的にネットワークからレスポンスが返されます。
- キャッシュのみは、レスポンスを強制的にキャッシュから取得します。
これらの戦略は、workbox-routing が提供するメソッドを使用して、リクエストを選択できます。
ルート マッチングによるキャッシュ戦略の適用
workbox-routing は、ルートを照合してキャッシュ戦略で処理する registerRoute メソッドを公開します。registerRoute は Route オブジェクトを受け入れ、このオブジェクトは 2 つの引数を受け入れます。
マッチング コールバックは、Request オブジェクト、リクエスト URL 文字列、フェッチ イベント、リクエストが同一オリジン リクエストかどうかを示すブール値を含むコンテキスト オブジェクトを提供するため、ルートの照合に推奨されます。
一致したルートをハンドラが処理します。次の例では、受信した同一オリジン イメージ リクエストに一致する新しいルートが作成され、最初にキャッシュが適用され、ネットワーク戦略にフォールバックします。
// sw.js
import { registerRoute, Route } from 'workbox-routing';
import { CacheFirst } from 'workbox-strategies';
// A new route that matches same-origin image requests and handles
// them with the cache-first, falling back to network strategy:
const imageRoute = new Route(({ request, sameOrigin }) => {
return sameOrigin && request.destination === 'image'
}, new CacheFirst());
// Register the new route
registerRoute(imageRoute);
複数のキャッシュの使用
ワークボックスを使用すると、バンドルされた戦略で利用可能な cacheName オプションを使用して、キャッシュに保存されたレスポンスを個別の Cache インスタンスにバケット化できます。
以下の例では、画像は stale-while-revalidate 戦略を使用していますが、CSS アセットと JavaScript アセットでは、キャッシュ優先でネットワーク戦略を使用しています。cacheName プロパティを追加することで、各アセットのルートでレスポンスが別々のキャッシュに配置されます。
// sw.js
import { registerRoute, Route } from 'workbox-routing';
import { CacheFirst, StaleWhileRevalidate } from 'workbox-strategies';
// Handle images:
const imageRoute = new Route(({ request }) => {
return request.destination === 'image'
}, new StaleWhileRevalidate({
cacheName: 'images'
}));
// Handle scripts:
const scriptsRoute = new Route(({ request }) => {
return request.destination === 'script';
}, new CacheFirst({
cacheName: 'scripts'
}));
// Handle styles:
const stylesRoute = new Route(({ request }) => {
return request.destination === 'style';
}, new CacheFirst({
cacheName: 'styles'
}));
// Register routes
registerRoute(imageRoute);
registerRoute(scriptsRoute);
registerRoute(stylesRoute);