CacheStorage.match()

 match() 作为 CacheStorage 接口的方法 (可适用于全局性caches) 通过给定的 Request 对象或者url字符串作为key来检查已经被缓存的 Response对象。这个方法针对于Response返回 Promise 类型，如果没有匹配则返回 undefined 。

可以通过创建（缓存）顺序来查找缓存对象。

语法

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

参数

request

想要匹配的 Request。这个参数可以是 Request 对象亦可是 URL 字符串。

options 可选

这个对象中的属性控制着在匹配操作中如何进行匹配选择。可选择参数如下:

• ignoreSearch: Boolean值， 指定匹配过程是否应该忽略url中查询参数。举个例子,如果该参数设置为true, 那么 ?value=bar 作为 http://foo.com/?value=bar 中的查询参数将会在匹配过程中被忽略。该参数默认 false。
• ignoreMethod:  Boolean 值 , 当被设置为 true 时，将会阻止在匹配操作中对 Request请求的 http 方式的验证 (通常只允许 GET 和 HEAD 两种请求方式)。该参数默认为 false.
• ignoreVary:  Boolean 值, 当该字段被设置为 true, 告知在匹配操作中忽略对VARY头信息的匹配。换句话说，当请求 URL 匹配上，你将获取匹配的 Response 对象，无论请求的 VARY  头存在或者没有。该参数默认为 false.
• cacheName:  DOMString 值， 表示所要搜索的缓存名称。

返回值

返回 Promise 对象 that resolves to the matching Response. If no matching response to the specified request is found, the promise resolves with undefined.

例子

This example is from the MDN sw-test example (see sw-test running live). Here we wait for a FetchEvent to fire. We construct a custom response like so:

1. Check whether a match for the request is found in the CacheStorage using CacheStorage.match(). If so, serve that.
2. If not, open the v1 cache using open(), put the default network request in the cache using Cache.put() and return a clone of the default network request using return response.clone(). The last is necessary because put() consumes the response body.
3. If this fails (e.g., because the network is down), return a fallback response.

caches.match(event.request).then(function(response) {
  return response || fetch(event.request).then(function(r) {
    caches.open('v1').then(function(cache) {
      cache.put(event.request, r);
    });
    return r.clone();
  });
}).catch(function() {
  return caches.match('/sw-test/gallery/myLittleVader.jpg');
});

Specifications

浏览器兼容性

亦可参考

• Using Service Workers
• Cache
• self.caches