workbox-cacheable-response

実行時にアセットをキャッシュに保存する場合、 指定された response が "有効"保存および再利用できます

workbox-cacheable-response モジュールは、Google Cloud サービス内の レスポンスをキャッシュに保存するかどうかに基づいて 数値ステータス コード 存在するという ヘッダー 特定の値、またはその両方で結合できます

ステータス コードに基づくキャッシュ保存

一連のステータス コードをキャッシュに保存する対象として扱うように Workbox 戦略を構成するには、戦略の plugins パラメータに CacheableResponsePlugin インスタンスを追加します。

import {registerRoute} from 'workbox-routing'; import {CacheFirst} from 'workbox-strategies'; import {CacheableResponsePlugin} from 'workbox-cacheable-response';  registerRoute(   ({url}) =>     url.origin === 'https://third-party.example.com' &&     url.pathname.startsWith('/images/'),   new CacheFirst({     cacheName: 'image-cache',     plugins: [       new CacheableResponsePlugin({         statuses: [0, 200],       }),     ],   }) );

この設定では、 https://third-party.example.com/images/ に対するリクエストで、すべてのリクエストをキャッシュに保存する ステータス コードが 0 または 200 である。

ヘッダーに基づくキャッシュ保存

プラグインを作成するときに headers オブジェクトを設定して、キャッシュに追加する条件として特定のヘッダー値の存在を確認するように Workbox 戦略を構成できます。

import {registerRoute} from 'workbox-routing'; import {StaleWhileRevalidate} from 'workbox-strategies'; import {CacheableResponsePlugin} from 'workbox-cacheable-response';  registerRoute(   ({url}) => url.pathname.startsWith('/path/to/api/'),   new StaleWhileRevalidate({     cacheName: 'api-cache',     plugins: [       new CacheableResponsePlugin({         headers: {           'X-Is-Cacheable': 'true',         },       }),     ],   }) );

/path/to/api/ を含むリクエスト URL に対するレスポンスを処理する場合、 X-Is-Cacheable という名前のヘッダー（ に対するレスポンスを返します。このヘッダーが存在し、値が「true」に設定されている場合、レスポンスはキャッシュに保存できます。

複数のヘッダーを指定する場合は、いずれか 1 つのヘッダーのみを指定します。 照合する必要があります

ヘッダーとステータス コードに基づくキャッシュ保存

ステータスとヘッダーの両方の設定を混在させることができます。両方の条件 レスポンスがキャッシュ可能と見なされるには、要件を満たしている必要があります。言い換えると、 構成済みのステータス コードのいずれかがレスポンスに含まれている必要があります。かつ 少なくとも 1 つのヘッダーが必要です。

import {registerRoute} from 'workbox-routing'; import {StaleWhileRevalidate} from 'workbox-strategies'; import {CacheableResponsePlugin} from 'workbox-cacheable-response';  registerRoute(   ({url}) => url.pathname.startsWith('/path/to/api/'),   new StaleWhileRevalidate({     cacheName: 'api-cache',     plugins: [       new CacheableResponsePlugin({         statuses: [200, 404],         headers: {           'X-Is-Cacheable': 'true',         },       }),     ],   }) );

デフォルトとは

cacheableResponse.CacheableResponsePlugin を明示的に構成せずに Workbox の組み込み戦略のいずれかを使用する場合、ネットワークから受信したレスポンスをキャッシュに保存するかどうかは、次のデフォルトの条件に基づいて判断されます。

  • staleWhileRevalidate と networkFirst: ステータスが 0 のレスポンス （不透明なレスポンス） または 200 はキャッシュ可能と見なされます。
  • cacheFirst: ステータスが 200 のレスポンスはキャッシュに保存可能と見なされます。

デフォルトでは、レスポンス ヘッダーはキャッシュ可能性の判断には使用されません。

さまざまなデフォルトがあるのはなぜですか？

デフォルトの設定は、レスポンスのステータスが 0 かどうかによって異なります。 （不透明なレスポンス） キャッシュに保存されます「ブラック ボックス」による不透明なレスポンスの特性であるため、 レスポンスが成功したかどうかを Service Worker が 有効なかどうか、または返されたエラー レスポンスを反映しているかどうか。 配信します。

キャッシュに保存されたレスポンスを更新する手段が含まれている戦略（staleWhileRevalidate や networkFirst など）では、キャッシュが次回更新されるときに適切な正常なレスポンスが使用されるため、一時的なエラー レスポンスがキャッシュに保存されるリスクが軽減されます。

受信した最初のレスポンスをキャッシュに保存し、 キャッシュされたレスポンスを無期限に再利用すると キャッシュされ再利用される一時的なエラーはより深刻です。エラーになるのは cacheFirst はレスポンスの保存を ステータス コードが 200 である。

高度な使用

ワークボックス戦略以外で同じキャッシュ ロジックを使用する場合は、 CacheableResponse クラスを直接使用できます。

import {CacheableResponse} from 'workbox-cacheable-response';  const cacheable = new CacheableResponse({   statuses: [0, 200],   headers: {     'X-Is-Cacheable': 'true',   }, });  const response = await fetch('/path/to/api');  if (cacheable.isResponseCacheable(response)) {   const cache = await caches.open('api-cache');   cache.put(response.url, response); } else {   // Do something when the response can't be cached. }

型

CacheableResponse

このクラスを使用すると、実行したいアクションと ステータス コードやヘッダーがあると、 Response キャッシュ可能と見なされます

プロパティ

  • コンストラクタ

    void

    新しい CacheableResponse インスタンスを作成するには、少なくとも 1 つの config プロパティのいずれか。

    statuses と headers の両方を指定する場合は、両方の条件を指定する必要があります。 Response がキャッシュ可能と見なされるには、条件を満たしている必要があります。

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

    (config?: CacheableResponseOptions) => {...}

  • isResponseCacheable

    void

    このオブジェクトの構成に基づいて、レスポンスがキャッシュに保存可能かどうかを確認します。

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

    (response: Response) => {...}

    • レスポンス

      レスポンス

      キャッシュ可能性が設定されているレスポンス 。

    • 戻り値

      ブール値

      Response がキャッシュに保存可能な場合は true、それ以外の場合は false。

CacheableResponseOptions

プロパティ

  • headers

    オブジェクト（省略可）

  • ステータス

    number[] 省略可

CacheableResponsePlugin

cacheWillUpdate ライフサイクル コールバックを実装するクラス。これにより、 Workbox の組み込み機能を介して行われたリクエストにキャッシュ可能性チェックを簡単に追加可能 説明します。

プロパティ

  • コンストラクタ

    void

    新しい CacheableResponsePlugin インスタンスを作成するには、 少なくとも 1 つの config プロパティ。

    statuses と headers の両方が指定されている場合、Response がキャッシュに保存可能と見なされるには、両方の条件を満たす必要があります。

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

    (config: CacheableResponseOptions) => {...}