Web/API/Cache/match

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 the Cache. This can be a Request 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 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 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 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.

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

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`match` Experimental'	Chrome Full support 43	Edge Full support 16	Firefox Full support 39 Notes' Full support 39 Notes' 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.