CacheStorage.match()

安全上下文: 此项功能仅在一些支持的浏览器安全上下文(HTTPS)中可用。

备注: 此特性在 Web Worker 中可用。

CacheStorage 接口的 match() 方法检查给定的 Request 对象或 URL 字符串是否是一个已存储的 Response 对象的键。这个方法针对 Response 返回一个 Promise,如果没有匹配则兑现为 undefined

你可以通过窗口的 Window.caches 属性或 worker 的 WorkerGlobalScope.caches 属性访问 CacheStorage

会按 Cache 对象的创建顺序进行查询。

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

语法

js
match(request)
match(request, options)

参数

request

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

options 可选

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

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

返回值

返回 resolve 为匹配 ResponsePromise 对象。如果没有与指定 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

参见