MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/8d22564490d8

Cache.match()

这篇翻译不完整。请帮忙从英语翻译这篇文章

这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

Cache 接口的 match() 方法, 返回一个 Promise 解析为与 Cache 对象中的第一个匹配请求相关联的Response 。如果没有找到匹配,Promise 解析为 undefined

Syntax

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

Returns

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 Cache.match() resolves with response[0] (the first matching response) instead of response[] (all matching response in an array).

Parameters

request
The Request you are attempting to find in the Cache.
options 可选
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.
  • cacheName: A DOMString that represents a specific cache to search within. Note that this option is ignored by Cache.match().

Examples

This example is taken from the custom offline page example (live demo).

The following example 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, we decided that 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 Workers
Cache
Working Draft Initial definition.

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 40.0 [1] 39 (39)[2] 未实现 24 未实现
All options supported 54.0     41  
Feature Android Android Webview Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support 未实现 未实现 39.0 (39) ? 未实现 (Yes) 未实现 40.0 [1]
All options supported 未实现 未实现       41   54.0

See also

文档标签和贡献者

标签: 
 此页面的贡献者: xgqfrms-GitHub
 最后编辑者: xgqfrms-GitHub,