CacheStorage.match()

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

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

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

構文

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

パラメーター

request

一致させたい Request。 これは、Request オブジェクトまたは URL 文字列にすることができます。

options Optional

match 操作での照合方法を制御するプロパティを持つオブジェクト。 利用可能なオプションは次のとおりです。

• ignoreSearch: 照合方法が URL のクエリ文字列を無視するかどうかを指定する Boolean。 例えば、true に設定すると、http://foo.com/?value=bar の ?value=bar 部分は、照合するときに無視されます。 デフォルトは false です。
• ignoreMethod: true に設定すると、照合方法が Request  http メソッドを検証できないようにする Boolean（通常は GET と HEAD のみが許可されます）。 デフォルトは false です。
• ignoreVary: true に設定された場合、VARY ヘッダーの照合をしないように照合方法に指示する Boolean。 つまり、URL が一致する場合、Response オブジェクトに VARY ヘッダーがあるかどうかに関係なく一致します。 デフォルトは false です。
• cacheName: 検索する特定のキャッシュを表す DOMString。

戻り値

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

例

この例は 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 worker の使用
• Cache
• WindowOrWorkerGlobalScope.caches