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 Optional
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 の定義
草案 初期定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
match
実験的
Chrome 完全対応 54
完全対応 54
部分対応 40
補足
補足 The options parameter only supports ignoreSearch, and cacheName.
Edge 完全対応 16Firefox 完全対応 44
補足
完全対応 44
補足
補足 Extended Support Releases (ESR) before Firefox 78 ESR do not support service workers and the Push API.
IE 未対応 なしOpera 完全対応 41
完全対応 41
部分対応 27
補足
補足 The options parameter only supports ignoreSearch, and cacheName.
Safari 完全対応 11.1WebView Android 完全対応 54
完全対応 54
部分対応 40
補足
補足 The options parameter only supports ignoreSearch, and cacheName.
Chrome Android 完全対応 54
完全対応 54
部分対応 40
補足
補足 The options parameter only supports ignoreSearch, and cacheName.
Firefox Android 完全対応 44Opera Android 完全対応 41
完全対応 41
部分対応 27
補足
補足 The options parameter only supports ignoreSearch, and cacheName.
Safari iOS 完全対応 ありSamsung Internet Android 完全対応 6.0
完全対応 6.0
部分対応 4.0
補足
補足 The options parameter only supports ignoreSearch, and cacheName.

凡例

完全対応  
完全対応
未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。

関連情報