The match()
method of the Cache
interface returns a Promise
that resolves to the Response
associated with the first matching request in the Cache
object. If no match is found, the Promise
resolves to undefined
.
Syntax
cache.match(request, {options}).then(function(response) { // Do something with the response });
Parameters
- request
- The
Request
for which you are attempting to find responses in theCache
. This can be aRequest
object or a URL. - options Optional
- An object that sets options for the
match
operation. The available options are:
ignoreSearch
- A
Boolean
that specifies whether to ignore the query string in the URL. For example, if set totrue
the?value=bar
part ofhttp://foo.com/?value=bar
would be ignored when performing a match. It defaults tofalse
. ignoreMethod
: ABoolean
that, when set totrue
, prevents matching operations from validating theRequest
http
method (normally onlyGET
andHEAD
are allowed.) It defaults tofalse
.ignoreVary
: ABoolean
that when set totrue
tells the matching operation not to performVARY
header matching — i.e. if the URL matches you will get a match regardless of whether theResponse
object has aVARY
header. It defaults tofalse
.
- A
Return value
A Promise
that resolves to the first Response
that matches the request or to undefined
if no match is found.
Note: Cache.match()
is basically identical to Cache.matchAll()
, except that rather than resolving with an array of all matching responses, it resolves with the first matching response only (that is, response[0]
).
Examples
This example is taken from the custom offline page example (live demo). It uses a cache to supply selected data when a request fails. A catch()
clause is triggered when the call to fetch()
throws an exception. Inside the catch()
clause, match()
is used to return the correct response.
In this example, only HTML documents retrieved with the GET HTTP verb will be cached. If our if()
condition is false, then this fetch handler won't intercept the request. If there are any other fetch handlers registered, they will get a chance to call event.respondWith()
. If no fetch handlers call event.respondWith()
, the request will be handled by the browser as if there were no service worker involvement. If fetch()
returns a valid HTTP response with an response code in the 4xx or 5xx range, the catch()
will NOT be called.
self.addEventListener('fetch', function(event) {
// We only want to call event.respondWith() if this is a GET request for an HTML document.
if (event.request.method === 'GET' &&
event.request.headers.get('accept').indexOf('text/html') !== -1) {
console.log('Handling fetch event for', event.request.url);
event.respondWith(
fetch(event.request).catch(function(e) {
console.error('Fetch failed; returning offline page instead.', e);
return caches.open(OFFLINE_CACHE).then(function(cache) {
return cache.match(OFFLINE_URL);
});
})
);
}
});
Specifications
Specification | Status | Comment |
Service WorkersThe definition of 'Cache match' in that specification. | Working Draft | Initial definition. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Chrome
Full support 43 |
Edge
Full support 16 |
Firefox Full support 39 Full support 39 Notes' Extended Support Releases (ESR) before Firefox 78 ESR do not support service workers and the Push API. |
IE
No support No |
Opera
Full support 30 |
Safari
Full support 11 |
WebView Android
Full support 43 |
Chrome Android
Full support 43 |
Firefox Android
Full support 39 |
Opera Android
Full support 30 |
Safari iOS
Full support 11 |
Samsung Internet Android
Full support 4.0 |
Legend
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.'
- Experimental. Expect behavior to change in the future.
- See implementation notes.'
- See implementation notes.
See also
Cache.match() by Mozilla Contributors is licensed under CC-BY-SA 2.5.