CacheStorage: match() メソッド

安全なコンテキスト用: この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

メモ: この機能はウェブワーカー内で利用可能です。

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

CacheStorage には、ウィンドウの Window.caches プロパティまたはワーカーの WorkerGlobalScope.caches を介してアクセスできます。

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

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

構文

js
match(request)
match(request, options)

引数

request

照合したい Request。 これは、Request オブジェクトまたは URL 文字列にすることができます。

options 省略可

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

ignoreSearch

論理値で、照合処理が URL のクエリー文字列を無視するかどうかを指定します。例えば、true に設定すると、 http://foo.com/?value=bar?value=bar 部分は、照合するときに無視されます。 既定値は false です。

ignoreMethod

論理値で、 true に設定すると、照合処理が Request の HTTP メソッドを検証しないようにします(通常は GETHEAD のみが許可されます)。 既定値は false です。

ignoreVary

論理値で、 true に設定すると、 VARY ヘッダーの照合をしないように照合処理に支持します。 つまり、URL が一致する場合、Response オブジェクトに VARY ヘッダーがあるかどうかに関係なく一致します。 既定値は false です。

cacheName

文字列で、検索する特定のキャッシュを表します。

返値

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

このコードスニペットは、MDN の単純なサービスワーカーの例からのものです(単純なサービスワーカーがライブで実行するのを見る)。 ここで、 FetchEvent が発行されるのを待ちます。そして次のように独自のレスポンスを構築します。

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

            caches.open("v1").then((cache) => {
              cache.put(event.request, responseClone);
            });
            return response;
          })
          .catch(() => caches.match("/gallery/myLittleVader.jpg"));
      }
    }),
  );
});

仕様書

Specification
Service Workers
# cache-storage-match

ブラウザーの互換性

BCD tables only load in the browser

関連情報