アイテムをキャッシュに保存できる期間や、キャッシュに保存するアイテムの数について、キャッシュに制限を設けることはよくあります。Workbox は、workbox-expiration プラグインを介してこの機能を提供し、キャッシュ内のエントリ数を制限したり、長期間キャッシュに保存されたエントリを削除したりできます。
キャッシュ エントリ数の制限
キャッシュに保存されるエントリ数を制限するには、次のように maxEntries オプションを使用します。
import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
import {ExpirationPlugin} from 'workbox-expiration';
registerRoute(
({request}) => request.destination === 'image',
new CacheFirst({
cacheName: 'image-cache',
plugins: [
new ExpirationPlugin({
maxEntries: 20,
}),
],
})
);
これで、プラグインがこのルートに追加されます。キャッシュに保存されているレスポンスが使用されるか、新しいリクエストがキャッシュに追加されると、プラグインは構成されたキャッシュを参照して、キャッシュされたエントリの数が上限を超えていないことを確認します。その場合、最も古いエントリが削除されます。
キャッシュされたエントリの有効期間を制限する
リクエストがキャッシュに保存される期間を制限するには、次のように maxAgeSeconds オプションを使用して最大存続期間を秒単位で定義します。
import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
import {ExpirationPlugin} from 'workbox-expiration';
registerRoute(
({request}) => request.destination === 'image',
new CacheFirst({
cacheName: 'image-cache',
plugins: [
new ExpirationPlugin({
maxAgeSeconds: 24 * 60 * 60,
}),
],
})
);
プラグインは、リクエストまたはキャッシュが更新されるたびにエントリを確認し、削除します。
高度な使用方法
他の Workbox モジュールとは別に有効期限のロジックを使用する場合は、CacheExpiration クラスを使用します。
キャッシュに制限を適用するには、制御するキャッシュに対して CacheExpiration のインスタンスを作成します。
import {CacheExpiration} from 'workbox-expiration';
const cacheName = 'my-cache';
const expirationManager = new CacheExpiration(cacheName, {
maxAgeSeconds: 24 * 60 * 60,
maxEntries: 20,
});
キャッシュに保存されたエントリを更新するたびに、updateTimestamp() メソッドを呼び出して、期間を更新する必要があります。
await openCache.put(request, response);
await expirationManager.updateTimestamp(request.url);
その後、一連のエントリを期限切れにするたびに、expireEntries() メソッドを呼び出して、maxAgeSeconds と maxEntries の構成を適用できます。
await expirationManager.expireEntries();
型
CacheExpiration
CacheExpiration クラスを使用すると、Cache に格納されるレスポンスの数に有効期限や上限を定義できます。
プロパティ
-
コンストラクタ
void
新しい CacheExpiration インスタンスを作成するには、少なくとも 1 つの
configプロパティを指定する必要があります。constructor関数は次のようになります。(cacheName: string, config?: CacheExpirationConfig) => {...}-
cacheName
文字列
制限を適用するキャッシュの名前。
-
config
CacheExpirationConfig 省略可
-
-
delete
void
キャッシュ有効期限メタデータの追跡に使用される IndexedDB オブジェクト ストアを削除します。
delete関数は次のようになります。() => {...}-
戻り値
Promise<void>
-
-
expireEntries
void
指定されたキャッシュと指定された条件のエントリの有効期限。
expireEntries関数は次のようになります。() => {...}-
戻り値
Promise<void>
-
-
isURLExpired
void
使用する前に URL の有効期限が切れているかどうかを確認するために使用できます。
これには IndexedDB からのルックアップが必要なため、処理に時間がかかることがあります。
注: このメソッドでは、キャッシュに保存されたエントリは削除されません。
expireEntries()を呼び出して、indexedDB エントリとキャッシュ エントリを削除します。isURLExpired関数は次のようになります。(url: string) => {...}-
URL
文字列
-
戻り値
Promise<boolean>
-
-
updateTimestamp
void
指定された URL のタイムスタンプを更新します。これにより、最近使用された最大エントリに基づいてエントリを削除するときが正確になり、期限切れになるときにタイムスタンプが最新になります。
updateTimestamp関数は次のようになります。(url: string) => {...}-
URL
文字列
-
戻り値
Promise<void>
-
ExpirationPlugin
このプラグインを workbox-strategy で使用すると、経過時間やキャッシュ リクエストの数に定期的に上限を適用できます。
これは、カスタム cacheName プロパティ セットがある workbox-strategy インスタンスでのみ使用できます。つまり、デフォルトのランタイム キャッシュ名を使用する戦略では、エントリを期限切れにすることはできません。
キャッシュに保存されているレスポンスが使用または更新されるたびに、このプラグインは関連するキャッシュを調べて、古いレスポンスや余分なレスポンスを削除します。
maxAgeSeconds を使用する場合、レスポンスは有効期限が切れた後に 1 回使用できます。これは、キャッシュに保存されたレスポンスが使用されるまで有効期限のクリーンアップは行われないためです。レスポンスに「Date」ヘッダーがある場合は、軽量の有効期限チェックが実行され、レスポンスはすぐには使用されません。
maxEntries を使用する場合、最後にリクエストしたエントリが最初にキャッシュから削除されます。
プロパティ
-
コンストラクタ
void
constructor関数は次のようになります。(config?: ExpirationPluginOptions) => {...}
-
config
-
-
deleteCacheAndMetadata
void
これは、次の 2 つのオペレーションを実行するヘルパー メソッドです。
- ユーザーに代わって caches.delete() を呼び出して、このプラグイン インスタンスに関連付けられている基盤となるキャッシュ インスタンスすべてを削除します。
- 各 Cache インスタンスの有効期限の詳細の追跡に使用される IndexedDB からメタデータを削除します。
キャッシュの有効期限を使用する場合は、
caches.delete()を直接呼び出すよりも、このメソッドを呼び出すことをおすすめします。そうすることで、IndexedDB メタデータも完全に削除され、開いている IndexedDB インスタンスが削除されるためです。特定のキャッシュにキャッシュの有効期限を使用していない場合、
caches.delete()を呼び出してキャッシュの名前を渡すだけで十分です。その場合、クリーンアップに Workbox 固有のメソッドは必要ありません。deleteCacheAndMetadata関数は次のようになります。() => {...}-
戻り値
Promise<void>
ExpirationPluginOptions
プロパティ
-
matchOptions
CacheQueryOptions 省略可
-
maxAgeSeconds
number（省略可）
-
maxEntries
number（省略可）
-
purgeOnQuotaError
ブール値（省略可）