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
.
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
.
js
match(request) match(request, options)
request
The Request
for which you are attempting to find responses in the Cache
. This can be a Request
object or a URL string.
options
Optional
An object that sets options for the match
operation. The available options are:
ignoreSearch
A boolean value that specifies whether to ignore the query string in the URL. For example, if set to true
the ?value=bar
part of http://foo.com/?value=bar
would be ignored when performing a match. It defaults to false
.
ignoreMethod
A boolean value that, when set to true
, prevents matching operations from validating the Request
http
method (normally only GET
and HEAD
are allowed.) It defaults to false
.
ignoreVary
A boolean value that when set to true
tells the matching operation not to perform VARY
header matching — i.e. if the URL matches you will get a match regardless of whether the Response
object has a VARY
header. It defaults to false
.
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]
).
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.
js
self.addEventListener("fetch", (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").includes("text/html") ) { console.log("Handling fetch event for", event.request.url); event.respondWith( fetch(event.request).catch((e) => { console.error("Fetch failed; returning offline page instead.", e); return caches .open(OFFLINE_CACHE) .then((cache) => cache.match(OFFLINE_URL)); }), ); } });
Specification |
---|
Service Workers # cache-match |
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
match |
43 | 16 | 41 | No | 30 | 11.1 | 43 | 43 | 41 | 30 | 11.3 | 4.0 |
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Cache/match