Cache.match() | Web API

在此页

句法
范例
规范
浏览器兼容性
另请参阅
相关话题

match() 方法在 缓存 interface returns a Promise that resolves to the 响应 associated with the first matching request in the 缓存 object. If no match is found, the Promise resolves to undefined .

句法

cache.match(request, {options}).then(function(response) {
  // Do something with the response
});

参数

request


									Request

for which you are attempting to find responses in the


									缓存

. This can be a


									Request

object or a URL.

选项可选

An object that sets options for the


								match

operation. The available options are:

ignoreSearch : A 布尔 that specifies whether to ignore the query string in the URL. For example, if set to true the ?value=bar 部分在 http://foo.com/?value=bar would be ignored when performing a match. It defaults to false .
ignoreMethod : A 布尔 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 布尔 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 响应 对象拥有 VARY header. It defaults to false .

返回值

A Promise that resolves to the first 响应 that matches the request or to undefined if no match is found.

注意 : 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.

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);
        });
      })
    );
  }
});

规范

规范	状态	注释
服务工作者 The definition of 'Cache match' in that specification.	工作草案	初始定义。

浏览器兼容性

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. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`match`	Chrome 43	Edge 16	Firefox 39 注意事项 39 注意事项 Extended Support Releases (ESR) before Firefox 78 ESR do not support service workers and the Push API.	IE 不支持 No	Opera 30	Safari 11	WebView Android 43	Chrome Android 43	Firefox Android 39	Opera Android 30	Safari iOS 11	Samsung Internet Android 4.0

图例

完整支持
不支持
实验。期望将来行为有所改变。

另请参阅

元数据

最后修改： Jun 23, 2020

服务工作者 API
缓存
方法
1. add()
2. addAll()
3. delete()
4. keys()
5. match()
6. matchAll()
7. put()
Related pages for Service Workers API

在此页

句法

参数

返回值

范例

规范

浏览器兼容性

图例

另请参阅

相关话题