CacheStorage: match() メソッド

request

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

options 省略可

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

ignoreSearch

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

ignoreMethod

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

ignoreVary

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

cacheName

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

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

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

1. CacheStorage で CacheStorage.match() を使用して、リクエストに一致するものがあるかどうかを確認します。もしあれば、それを提供します。
2. ない場合は、 v1 キャッシュを open() で開き、 Cache.put() を使用して既定のネットワークリクエストをキャッシュに入れ、 return response.clone() を使用して既定値のネットワークリクエストのクローンを返します。 put() がレスポンスの本体を消費するため、最後に必要です。
3. 失敗した場合（例えば、ネットワークがダウンしているため）、フォールバックレスポンスを返します。

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"));
      }
    }),
  );
});

• サービスワーカーの使用
• Cache
• Window.caches および WorkerGlobalScope.caches