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 April 2018.
备注: 此特性在 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
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
值,表示所要搜索的缓存名称。
返回值
示例
此示例来自于 MDN sw-test example (请参阅 sw-test running live)。这里,等待 FetchEvent
事件触发。我们构建自定义响应,像这样:
- 使用
CacheStorage.match()
检查CacheStorage
中是否存在匹配请求,如果存在,则使用它。 - 如果没有,使用
open()
打开v1
cache,使用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 |
浏览器兼容性
BCD tables only load in the browser