workbox-expiration（ワークボックスの有効期限）

アイテムをキャッシュに保存できる期間や、キャッシュに保存するアイテムの数について、キャッシュに制限を設けることはよくあります。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();