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();

型

CacheExpiration

CacheExpiration クラスを使用すると、Cache に保存されるレスポンスの有効期限や上限を定義できます。

プロパティ

  • コンストラクタ

    void

    新しい CacheExpiration インスタンスを作成するには、config プロパティの少なくとも 1 つを指定する必要があります。

    constructor 関数は次のようになります。 

    (cacheName: string, config?: CacheExpirationConfig) => {...}

    • cacheName

      文字列

      制限を適用するキャッシュの名前。

    • config

      CacheExpirationConfig（省略可）

  • delete

    void

    キャッシュの有効期限のメタデータの追跡に使用される IndexedDB オブジェクト ストアを削除します。

    delete 関数は次のようになります。 

    () => {...}

    • 戻り値

      Promise<void>

  • expireEntries

    void

    指定されたキャッシュと指定された条件のエントリを期限切れにする。

    expireEntries 関数は次のようになります。 

    () => {...}

    • 戻り値

      Promise<void>

  • isURLExpired

    void

    URL を使用する前に、URL が期限切れかどうかを確認できます。

    これには IndexedDB からの検索が必要になるため、遅くなる可能性があります。

    注: このメソッドはキャッシュに保存されたエントリを削除しません。indexedDB エントリとキャッシュ エントリを削除するには、expireEntries() を呼び出します。

    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 インスタンスをすべて削除します。
    • 各 Cache インスタンスの有効期限の詳細を追跡するために使用される IndexedDB のメタデータを削除します。

    キャッシュの有効期限を使用する場合は、IndexedDB メタデータも確実に削除され、開いている IndexedDB インスタンスが削除されるため、このメソッドを呼び出すことをおすすめします。caches.delete() を直接呼び出すよりも優れています。

    特定のキャッシュにキャッシュの有効期限を使用しない場合は、caches.delete() を呼び出してキャッシュの名前を渡すだけで十分です。その場合、クリーンアップに Workbox 固有のメソッドは必要ありません。

    deleteCacheAndMetadata 関数は次のようになります。 

    () => {...}

    • 戻り値

      Promise<void>

ExpirationPluginOptions

プロパティ

  • matchOptions

    CacheQueryOptions（省略可）

  • maxAgeSeconds

    number（省略可）

  • maxEntries

    number（省略可）

  • purgeOnQuotaError

    ブール値（省略可）