CacheStorage.match()

CacheStorage インターフェイスの match() メソッドは、所与の Request または URL 文字列が保存された Response のキーであるかどうかをチェックします。 このメソッドは、ResponsePromise、または一致が見つからない場合に undefined に解決される Promise を返します。

グローバルな caches プロパティを介して CacheStorage にアクセスできます。

Cache オブジェクトは作成順に検索されます。

: caches.match() は便利なメソッドです。 同等の機能は、Response が返されるまで、(caches.keys() によって返される順序で)各キャッシュで cache.match() を呼び出すことです。

構文

caches.match(request, options).then(function(response) {
  // response で何かをする
});

パラメーター

request
一致させたい Request。 これは、Request オブジェクトまたは URL 文字列にすることができます。
options 省略可
match 操作での照合方法を制御するプロパティを持つオブジェクト。 利用可能なオプションは次のとおりです。
  • ignoreSearch: 照合方法が URL のクエリ文字列を無視するかどうかを指定する Boolean。 例えば、true に設定すると、http://foo.com/?value=bar?value=bar 部分は、照合するときに無視されます。 デフォルトは false です。
  • ignoreMethod: true に設定すると、照合方法が Request  http メソッドを検証できないようにする Boolean(通常は GETHEAD のみが許可されます)。 デフォルトは false です。
  • ignoreVary: true に設定された場合、VARY ヘッダーの照合をしないように照合方法に指示する Boolean。 つまり、URL が一致する場合、Response オブジェクトに VARY ヘッダーがあるかどうかに関係なく一致します。 デフォルトは false です。
  • cacheName: 検索する特定のキャッシュを表す DOMString

戻り値

一致する Response に解決される Promise。 指定されたリクエストに対する一致するレスポンスが見つからない場合、Promiseundefined に解決されます。
 

この例は MDN の sw-test の例からのものです(sw-test をライブで見る)。 ここでは、FetchEvent が発生するのを待ちます。 次のようなカスタムレスポンスを作成します。

  1. CacheStorage.match() を使用して、CacheStorage でリクエストの一致が見つかったかどうかを確認します。 もしそうなら、それを提供します。
  2. そうでない場合は、open() を使用して v1 キャッシュを開き、Cache.put() を使用してデフォルトのネットワークリクエストをキャッシュに入れ、return response.clone() を使用してデフォルトのネットワークリクエストのクローンを返します。 put() がレスポンスのボディを消費するため、最後が必要です。
  3. これが失敗した場合(例えば、ネットワークがダウンしているため)、フォールバックレスポンスを返します。
self.addEventListener('fetch', function(event) {
  event.respondWith(caches.match(event.request).then(function(response) {
    // caches.match() は常に解決します
    // ただし、成功の場合はレスポンスに値があります
    if (response !== undefined) {
      return response;
    } else {
      return fetch(event.request).then(function (response) {
        // レスポンスは1回のみ使用できます
        // クローンを保存して、1番目のコピーをキャッシュに入れ、
        // 2番目のコピーを提供する必要があります
        let responseClone = response.clone();

        caches.open('v1').then(function (cache) {
          cache.put(event.request, responseClone);
        });
        return response;
      }).catch(function () {
        return caches.match('/sw-test/gallery/myLittleVader.jpg');
      });
    }
  }));
});

仕様

仕様 状態 コメント
Service Workers
CacheStorage: match の定義
草案 初期定義

ブラウザーの互換性

BCD tables only load in the browser

関連情報