缓存随着每次加载而增加

Question

我正在研究 my portfolio website。它是一个 PWA，并且有一个 service worker。我正在使用服务工作者缓存索引页面和索引页面的所有必需资产。但是当我实际测试它时，缓存大小会随着每次加载而增加。经过一些实验后，我发现问题出在 Google 分析脚本上，但我不确定。但我找不到修复它的方法。我直接从 Google 分析中复制了代码。然后因为它不起作用，我尝试设置 crossorigin="anonymous"。然后它也不起作用。

Source code

提前致谢！

Answer 1

现在你的 service worker 的 fetch 处理程序无条件地对所有请求应用缓存策略，无论涉及哪个服务器。

如果您想避免将该策略应用于向第三方服务器发出的请求，例如 Google Analytics，您可以在调用 event.respondWith() 之前提前退出 fetch 处理程序.如果你这样做，那么正常的网络行为仍然适用，你不会得到任何缓存。

假设您要缓存的所有资产都来自同源服务器，您可以这样做：

self.addEventListener('fetch', (event) => {
  const url = new URL(event.request.url);
  if (url.origin !== location.origin) {
    return;
  }

  // event.respondWith() and the caching logic goes here.
});