如果您使用 Cache Storage API(无论是在 Service Worker 内使用,还是通过 window.caches
直接从 Web 应用中使用),有一些好消息:从 Chrome 54 开始,系统支持一整套 CacheQueryOptions
,以便您更轻松地找到所需的缓存响应。
此时有哪些选项?
您可以在对 CacheStorage.match()
或 Cache.match()
的任何调用中设置以下选项。如果未设置,它们都默认为 false
(对于 cacheName
,默认为 undefined
),并且您可以在对 match()
的单次调用中使用多个选项。
ignoreSearch
此参数会指示匹配算法忽略网址的搜索部分,也称为网址查询参数。如果来源网址包含用于分析跟踪等用途的查询参数,但这些参数在唯一标识缓存中的资源方面不重要,此功能会非常有用。例如,很多人成为了以下 Service Worker 的“陷阱”:
self.addEventListener('install', event => {
event.waitUntil(
caches.open('my-cache')
.then(cache => cache.add('index.html'))
);
});
self.addEventListener('fetch', event => {
// Make sure this is a navigation request before responding.
if (event.request.mode === 'navigation') {
event.respondWith(
caches.match(event.request) || fetch(event.request)
);
}
});
当用户直接导航到 index.html
时,此类代码可以按预期运行,但如果您的 Web 应用使用分析提供程序来跟踪入站链接,而用户导航到 index.html?utm_source=some-referral
,该怎么办?默认情况下,将 index.html?utm_source=some-referral
传递给 caches.match()
不会返回 index.html
的条目。但是,如果 ignoreSearch
设置为 true
,则无论设置了哪些查询参数,您都可以检索预期的缓存响应:
caches.match(event.request, {ignoreSearch: true})
cacheName
如果您有多个缓存,并且希望将响应存储在一个特定缓存中,那么 cacheName
可以派上用场。使用它可以提高查询效率(因为浏览器只需检查一个缓存,而不是所有缓存),并且当多个缓存都将某个网址用作键时,您可以检索该网址的特定响应。cacheName
仅在与 CacheStorage.match()
搭配使用时才有效,而不能与 Cache.match()
搭配使用,因为 Cache.match()
已在单个命名缓存上运行。
// The following are functionally equivalent:
caches.open('my-cache')
.then(cache => cache.match('index.html'));
// or...
caches.match('index.html', {cacheName: 'my-cache'});
ignoreMethod
和ignoreVary
ignoreMethod
和 ignoreVary
比 ignoreSearch
和 cacheName
更小众,但它们有特定用途。
ignoreMethod
允许您将具有任何 method
(POST
、PUT
等)作为第一个参数的 Request
对象传入 match()
。通常,仅允许发出 GET
或 HEAD
请求。
// In a more realistic scenario, postRequest might come from
// the request property of a FetchEvent.
const postRequest = new Request('index.html', {method: 'post'});
// This will never match anything.
caches.match(postRequest);
// This will match index.html in any cache.
caches.match(postRequest, {ignoreMethod: true});
如果设置为 true
,ignoreVary
表示系统会执行缓存查找,而不会考虑缓存响应中设置的任何 Vary
标头。如果您知道自己处理的不是使用 Vary 标头的缓存响应,则无需担心设置此选项。
浏览器支持
CacheQueryOptions
仅适用于支持 Cache Storage API 的浏览器。除了 Chrome 和基于 Chromium 的浏览器之外,目前仅 Firefox 支持 CacheQueryOptions
,因为 Firefox 已原生支持 CacheQueryOptions
。
如果开发者想在 Chrome 54 之前的版本中使用 CacheQueryOptions
,可以使用 Arthur Stolyar 提供的polyfill。