CacheStorage.match()
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2018年4月.
备注： 此特性在 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)
参数
requestoptions可选-
这个对象中的属性控制在匹配操作中如何进行匹配选择。可选择参数如下：
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值，表示所要搜索的缓存名称。
返回值
返回 resolve 为匹配 Response 的 Promise 对象。如果没有与指定 request 相匹配 response，promise 将使用 undefined resolve.
示例
此示例来自于 MDN sw-test example （请参阅 sw-test running live）。这里，等待 FetchEvent 事件触发。我们构建自定义响应，像这样：
- 使用
CacheStorage.match()检查CacheStorage中是否存在匹配请求，如果存在，则使用它。 - 如果没有，使用
open()打开v1cache，使用Cache.put()将默认网络请求放入 cache 中，并只用return response.clone()返回默认网络请求的克隆副本。最后一个是必须的，因为put()使用响应主体。 - 如果此操作失败（例如，因为网络已关闭），则返回备用响应。
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 |
浏览器兼容性
Loading…