Chrome 54 中的 CacheQueryOptions 新增功能

如果您使用 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'});

ignoreMethodignoreVary

ignoreMethodignoreVaryignoreSearchcacheName 更小众,但它们有特定用途。

ignoreMethod 允许您将具有任何 methodPOSTPUT 等)作为第一个参数的 Request 对象传入 match()。通常,仅允许发出 GETHEAD 请求。

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

如果设置为 trueignoreVary 表示系统会执行缓存查找,而不会考虑缓存响应中设置的任何 Vary 标头。如果您知道自己处理的不是使用 Vary 标头的缓存响应,则无需担心设置此选项。

浏览器支持

CacheQueryOptions 仅适用于支持 Cache Storage API 的浏览器。除了 Chrome 和基于 Chromium 的浏览器之外,目前仅 Firefox 支持 CacheQueryOptions,因为 Firefox 已原生支持 CacheQueryOptions

如果开发者想在 Chrome 54 之前的版本中使用 CacheQueryOptions,可以使用 Arthur Stolyar 提供的polyfill