Cache.match()

Cache インターフェイスの match() メソッドは、Cache オブジェクトで最初に一致したリクエストに関連付けられた Response に解決される Promise を返します。 一致が見つからない場合、Promiseundefined に解決されます。

構文

cache.match(request, {options}).then(function(response) {
  // レスポンスで何かをします
});

パラメーター

request
Cache 内でレスポンスを見つけようとしている 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 です。

戻り値

リクエストに一致する最初の Response に解決する、または一致が見つからない場合は undefined に解決する Promise

: Cache.match() は、一致するすべてのレスポンスの配列で解決するのではなく、最初に一致するレスポンスのみ(つまり、response[0])で解決することを除いて、基本的に Cache.matchAll() と同じです。

この例は、カスタムオフラインページの例(ライブデモ)からの引用です。 リクエストが失敗した場合、キャッシュを使用して選択したデータを提供します。 catch() 句は、fetch() の呼び出しが例外をスローしたときにトリガーされます。 catch() 句の内部では、 match() を使用して正しいレスポンスを返します。

この例では、GET HTTP 動詞で取得された HTML 文書のみがキャッシュされます。 if() 条件が false の場合、このフェッチハンドラーはリクエストをインターセプトしません。 他のフェッチハンドラーが登録されている場合、それらは event.respondWith() を呼び出す機会を得ます。 フェッチハンドラーが event.respondWith() を呼び出さない場合、リクエストはブラウザーによって処理され、サービスワーカーが関与していないかのように処理されます。 fetch() が 4xx または 5xx の範囲のレスポンスコードで有効な HTTP レスポンスを返す場合、catch() は呼び出されません。

self.addEventListener('fetch', function(event) {
  // これが HTML 文書に対する GET リクエストである場合のみ、event.respondWith() を呼び出します。
  if (event.request.method === 'GET' &&
      event.request.headers.get('accept').indexOf('text/html') !== -1) {
    console.log('フェッチイベントの処理: ', event.request.url);
    event.respondWith(
      fetch(event.request).catch(function(e) {
        console.error('フェッチ失敗、代わりにオフラインページに戻ります。', e);
        return caches.open(OFFLINE_CACHE).then(function(cache) {
          return cache.match(OFFLINE_URL);
        });
      })
    );
  }
});

仕様

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

ブラウザーの互換性

BCD tables only load in the browser

関連情報