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() メソッドを呼び出して、maxAgeSecondsmaxEntries の構成を適用できます。

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) => {...}

  • 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

    ブール値(省略可)