每次加载都会建立缓存答案

【问题标题】：Cache is building up with each load每次加载都会建立缓存
【发布时间】：2021-12-05 11:49:58
【问题描述】：

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

Source code

提前致谢！

【问题讨论】：

标签： google-analytics progressive-web-apps service-worker browser-cache cachestorage

【解决方案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.
});

【讨论】：

感谢您解决了这个问题。我浏览了你的一些答案，我才知道你在工作箱的指南上写了。您是 Google 员工吗？
是的，我是 Google Web DevRel 团队的成员，也是 Workbox 的维护者。