PWA: Workbox Cache Expiration 和訳

Workbox Cache Expiration

参照元ページ: https://developers.google.com/web/tools/workbox/modules/workbox-cache-expiration

Workbox Cache Expirationとは？

どれだけ数のファイルをキャッシュさせるか、もしくはキャッシュ期間に制限をかけたくなることはよくあります。Workboxではworkbox-cache-expirationプラグインを使うことで、キャッシュされるエントリー数もしくは長期間キャッシュされたエントリーを削除することができます。

キャッシュエントリー数の制限

キャッシュに保存されるエントリー数を制限するために、maxEntriesの設定を使用できます。

workbox.routing.registerRoute(
  new RegExp('/images/'),
  new workbox.strategies.CacheFirst({
    cacheName: 'image-cache',
    plugins: [
      new workbox.expiration.Plugin({
        maxEntries: 20,
      }),
    ],
  })
);

これによりプラグインがこのルーティングに追加されます。
キャッシュされたレスポンスが使用されたり、新しいリクエストがキャッシュに追加されると、プラグインは設定を見に行ってキャッシュエントリー数が設定されている値を超えないように調整します。もし超えてしまう場合は、一番古いエントリーから削除されていきます。

キャッシュ期間の制限


あるリクエストがどれくらいの期間キャッシュされるかはmaxAgeSecondsの設定で秒数で指定します。

workbox.routing.registerRoute(
  /\/images\//,
  new workbox.strategies.CacheFirst({
    cacheName: 'image-cache',
    plugins: [
      new workbox.expiration.Plugin({
        maxAgeSeconds: 24 * 60 * 60,
      })
    ]
  })
)

各リクエストもしくはキャッシュの更新後にプラグインはエントリーをチェック&削除します。

ここで注意すべきことは、

• IndexedDBを開くのは時間がかかるため、リクエストが使用されるまで期限は有効になりません。つまり、期限が切れたリクエストは一度使われることがありますが、その後は期限切れとして扱われます。
• これを軽減するために、プラグインはキャッシュされたレスポンスの "Date"ヘッダをチェックします。もし日付が解析できるのであれば、IndexedDBルックアップを必要としないため、これに基づいて期限が切れます。

応用編

CacheExpirationクラスを使えば、他のWorkboxモジュールと切り離してExpirationロジックを使うことができます。

キャッシュに制限をかける場合、コントロールしたいキャッシュに対してCacheExpirationのインスタンスを作成します。

const cacheName = 'my-cache';
const expirationManager = new workbox.expiration.CacheExpiration(
  cacheName,
  {
    maxAgeSeconds: 24 * 60 * 60,
    maxEntries: 20,
  }
);

キャッシュエントリーを更新したい場合、"age"を更新するためにupdateTimestamp()メソッドを呼ぶ必要があります。

await openCache.put(
  request,
  response
);

await expirationManager.updateTimestamp(request.url)

そのあとエントリーを保存期間切れにしたい時は、expireEntries()メソッドを呼びます。expireEntries()メソッドはmaxAgeSecondsとmaxEntriesの設定を元にエントリーを保存期間切れにします。
参考: https://developers.google.com/web/tools/workbox/reference-docs/v2.1.3/module-workbox-cache-expiration.CacheExpiration

await expirationManager.expireEntries();