Cache.match() - Web API 接口参考编辑

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

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

语法

cache.match(request,{options}).then(function(response) {
  //操作response
});

返回值

一个 Promise 对象，该对象解析为第一个匹配请求的 Response 对象，如果没有匹配到，则解析到 undefined 。

Note: Cache.match() 基本上和 Cache.matchAll() 一样, 只不过 Cache.match() 只解析为 response[0] （第一个匹配的响应(response)对象）而不是 response[] （所有响应对象组成的数组）。

参数

request

在Cache对象中查找的Request对象对应的response。这个Request可以是 object 或者是一个URL.

options 可选

一个为 match 操作设置选项的对象。有效的选项如下:

ignoreSearch: 一个 Boolean 值用来设置是否忽略url中的query部分。例如, 如果该参数设置为 true ，那么 http://foo.com/?value=bar中的 ?value=bar 部分就会在匹配中被忽略. 该选项默认为 false。
ignoreMethod: 一个 Boolean 值，如果设置为 true在匹配时就不会验证 Request 对象的http 方法 (通常只允许是 GET 或 HEAD 。) 该参数默认值为 false。
ignoreVary: 一个 Boolean 值，该值如果为 true 则匹配时不进行 VARY 部分的匹配。例如，如果一个URL匹配，此时无论Response对象是否包含VARY头部，都会认为是成功匹配。该参数默认为 false。
cacheName: 一个 DOMString ，代表一个具体的要被搜索的缓存。注意该选项被 Cache.match()方法忽略。

例子

这个是个来自 custom offline page 的例子 (live demo)。

下面的例子在请求失败时提供特定的数据。 catch() 在 fetch() 的调用抛出异常时触发。在 catch() 语句中, match()用来返回正确的响应。

在这个例子中，我们决定只缓存通过GET取得的HTML文档. 如果 if() 条件是 false，那么这个fetch处理器就不会处理这个请求。如果还有其他的fetch处理器被注册，它们将有机会调用 event.respondWith() 如果没有fetch处理器调用 event.respondWith() ，该请求就会像没有 service worker 介入一样由浏览器处理。如果 fetch() 返回了有效的HTTP响应，相应码是4xx或5xx，那么catch() 就不会被调用。

self.addEventListener('fetch', function(event) {
  // 我们只想在用GET方法请求HTML文档时调用 event.respondWith()。
  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);
        });
      })
    );
  }
});

规范

Specification	Status	Comment
Service Workers Cache	Working Draft	Initial definition.

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Desktop
Mobile

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

[1] The options parameter only supports ignoreSearch, and cacheName.
[2] Service workers (and Push) have been disabled in the Firefox 45 & 52 Extended Support Releases (ESR.)