Question

我正在使用服务工作者将响应从远程服务器缓存到运行时缓存中，基于此处的示例服务工作者代码：https://googlechrome.github.io/samples/service-worker/basic/

我希望尽可能高效地执行此操作，因为URL中有很多对返回的内容没有影响（仅限于服务器上的响应生成方式），因此用于缓存目的的URL可以与用于获取目的的不同。

例如，以下两个网址返回完全相同的内容：

https://example.com/{"a":"whatever","b":"matters"}
https://example.com/{"a":"anything","b":"matters"}

但以下内容会返回不同的内容：

https://example.com/{"a":"anything","b":"different"}

因此，出于缓存目的，我们可以从URL中删除{"a":"anything"}，但是为了获取该信息，应该保留在URL中。

我是服务工作者的新手，我很难看到如何实现这一目标。

Answer 1

首先，这些......看起来很奇怪......网址，但我会带你去看看，并假设你实际上包含序列化的JSON作为网址的路径。（我建议做一些URL编码并将其用作查询参数，而不是在路径中，但这与您的答案无关。）

在任何情况下，使用Cache Storage API查找条目时，您可以完全控制将哪个URL用作传递给match()的缓存键。因此，您可以规范化传入fetch事件处理程序的传入网址，以便在将其传递给match()之前删除您不想要的任何内容。您希望确保在向缓存添加条目时，您使用的URL将采用与用于查找的URL相同的格式。

以下是一个例子：

// Assume that 'https://example.com/{"b":"different"}' is a cached URL.
self.addEventListener('fetch', event => {
  // You'd probably want some sort of if() statement here so that
  // you only respond with this normalized URL under certain conditions.
  const normalizedUrl = normalizeUrl(event.request.url);
  event.respondWith(caches.match(normalizedUrl));
});

function normalizeUrl(urlString) {
  const urlObject = new URL(urlString);
  // This assumes that the path of your incoming
  // URL contains serialized JSON data, without the leading '/'.
  const jsonString = urlObject.pathname.substring(1);
  const jsonData = JSON.parse(decodeURIComponent(jsonString));
  // Repeat this with any other properties you want to remove.
  jsonData.a = undefined;
  urlObject.pathname = JSON.stringify(jsonData);
  return decodeURI(urlObject.toString());
}

但就像我说的那样，这是一件很奇怪的事情。希望能够修改缓存键并返回所需缓存条目的一般概念是有帮助的，但我不会在生产系统中使用这样的代码。

服务工作者：将URL变体视为与缓存目的相同

1 个答案: