Workbox Strategies

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

Workbox Strategiesとは？

サービスワーカーが導入されて初めて、キャッシングストラテジーが登場しました。キャッシングストラテジーとは、fetchイベント後にサービスワーカーが作り出すレスポンスの返し方の様式のことです。

workbox-strategiesを使えば、よく使われるキャッシングストラテジーをサービスワーカーで使用できます。

ここではWorkboxでサポートされているストラテジーに絞って説明しますが、さらに学びたいのであればこちらを参照してください。

ストラテジーを使う

以下の例では、workbox-routingを利用したWorkbox cachingの使い方をお見せします。各ストラテジーのオプションの設定方法はこちらを参考にしてください。

上級者セクションではworkbox-routingを使わないキャッシングストラテジーの使い方をカバーしています。

Stale-While-Revalidate

補足: staleの意味は「古い」ので、直訳すると「(キャッシュ更新)有効中は古い」となります。

stale-while-revalidateパターンでは

キャッシュが利用可能であれば即座にキャッシュしたコンテンツ
キャッシュがない場合はネットワークからのコンテンツ

を返します。さらにネットワークへリクエストを飛ばし、キャッシュを更新します。

アプリケーションで常に最新版のリソースを出さなくても良い場合、Stale-While-Revalidateはよく採用されます。

Cache First (Cache Falling Back to Network)

オフラインのアプリケーションはキャッシュへ大きく依存しますが、クリティカルでなく（古い）キャッシュをアセットとして使えるケースではcache-firstが最良の選択肢です。

もしすべてのリクエストにキャッシュされたコンテンツで返すことができればネットワークへのリクエストは発生しません。もしキャッシュされたコンテンツがない場合、ネットワークへリクエストが飛び、レスポンスはキャッシュされます。次のリクエストがキャッシュで返されるように。

Network First (Network Falling Back to Cache)

 リクエストの内容が頻繁に更新される場合、network firstストラテジーは最良の選択肢です。デフォルトでは、ネットワークから最新のリクエストをフェッチします。もしリクエストが成功すれば、レスポンスをキャッシュします。もしネットワークリクエストが失敗した場合、キャッシュされたコンテンツが使用されます。

workbox.routing.registerRoute(
  new RegExp('/social-timeline/'),
  new workbox.strategies.NetworkFirst()
);

Network Only

もしネットワークからのレスポンスのみを使いたい場合はnetwork onlyが使うべきストラテジーです。


workbox.routing.registerRoute(
  new RegExp('/admin/'),
  new workbox.strategies.NetworkOnly()
);

Cache Only

cache onlyストラテジーはキャッシュだけにリクエストを投げます。Workboxではこの使用ケースは稀ですが、プリキャッシングの仕方によっては役に立つでしょう。


workbox.routing.registerRoute(
  new RegExp('/app/v2/'),
  new workbox.strategies.CacheOnly()
);

ストラテジーの設定

すべてのストラテジーでは次の項目が自由に設定できます。

キャッシュの名前
キャッシュの有効期限
ライフサイクルメソッドが呼ばれる時に使いたいプラグインの配列

ストラテジーで使用されるキャッシュの変更

キャッシュの名前を変更することでキャッシュを更新することができます。これによりデバッグ時のアセットファイルを分離することができます。

プラグインを使う

Workboxはこれらのストラテジーで使えるプラグインを用意しています。

workbox.expiration.Plugin
workbox.cacheableResponse.Plugin
workbox.broascastUpdate.Plugin
workbox.backgroundSync.Plugin

上記のプラグイン（もしくはカスタムプラグイン）を使うには、pluginオプションで指定します。


workbox.routing.registerRoute(
  new RexExp('/images/'),
  new workbox.strategies.CacheFirst({
    cacheName: 'image-cache',
    plugins: [
      new workbox.expiration.Plugin({
        // リクエストのキャッシュ期間は１週間
        maxAgeSeconds: 7 * 24 * 60 * 60,
        // 10リクエストのみキャッシュする
        maxEntries: 10.
      })
    ]
  })
)

応用編

自分で書いたフェッチイベントのロジック内でストラテジーを使いたい場合、イベント内でストラテジーのクラスを記述します。

例えば、stale-while-revalidateを使いたい場合、次のように記述できます。


self.addEventListener('fetch', (event) => {
  if (event.request.url === '/') {
    const staleWhileRevalidate = new workbox.strategies.StaleWhileRevalidate();
    event.respondWith(staleWhileRevalidate.handle({event}));
  }
})

こちらで利用可能なクラス一覧を見つけられます。