Cache.match()
Cache
インターフェイスの match()
メソッドは、Cache
オブジェクトで最初に一致したリクエストに関連付けられた Response
に解決される Promise
を返します。 一致が見つからない場合、Promise
は undefined
に解決されます。
構文
cache.match(request, {options}).then(function(response) { // レスポンスで何かをします });
パラメーター
- request
Cache
内でレスポンスを見つけようとしているRequest
。 これは、Request
オブジェクトまたは URL です。- options 省略可
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