CacheStorage.match()

实验性: 这是一项实验性技术
在将其用于生产之前，请仔细检查浏览器兼容性表格。

CacheStorage 接口 (可适用于全局性caches) 的 match() 方法检查给定的Request 对象或 url 字符串是否是一个已存储的 Response 对象的 key. 这个方法针对 Response 返回一个 Promise ，如果没有匹配则返回 undefined 。

cache 对象按创建顺序查询。

备注： caches.match() 是一个便捷方法。其作用等同于在每个缓存上调用 cache.match() 方法（按照caches.keys()返回的顺序) 直到返回Response 对象。

语法

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

参数

request

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

options 可选

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

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

返回值

返回 resolve 为匹配 Response 的 Promise 对象。如果没有与指定 request 相匹配 response，promise 将使用 undefined resolve.

例子

此示例来自于 MDN sw-test example （请参阅 sw-test running live）。这里，等待 FetchEvent 事件触发。我们构建自定义响应，像这样：

  1. 使用 CacheStorage.match() 检查 CacheStorage 中是否存在匹配请求，如果存在，则使用它。
  2. 如果没有，使用 open() 打开 v1 cache，使用 Cache.put() 将默认网络请求放入 cache 中，并只用 return response.clone() 返回默认网络请求的克隆副本。最后一个是必须的，因为 put() 使用响应主体。
  3. 如果此操作失败（例如，因为网络已关闭），则返回备用响应。

js

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

规范

Specification
Service Workers
# cache-storage-match

浏览器兼容性

BCD tables only load in the browser

亦可参考