功能或错误：Workbox 缓存了 Google 的 analytics.js 脚本，但响应不透明

Question

我在 PWA 中使用 Workbox 和 Google Analytics。我正在使用GA support from workbox，但作为其中的一部分，为analytics.js 文件设置了缓存路由。

该代码位于此处： https://github.com/GoogleChrome/workbox/blob/v4.3.1/packages/workbox-google-analytics/initialize.mjs#L137。它使用 NetworkFirst 策略，它将allow caching opaque responses。

资源 https://www.google-analytics.com/analytics.js 似乎没有 CORS 标头，因此我们得到一个不透明的响应，正如 the workbox doco 所说：

配额使用量意外高的一个常见原因是运行时缓存不透明响应...

这意味着我的应用将使用 7mb 的存储空间，因为我包含了 GA。我不知道缓存 analytics.js 文件（一项功能）是否值得 7mb 的罚款，或者这是否是一个错误。

我已选择退出为我缓存该脚本的工作箱，方法是：

// make sure this it before the initialize() call so it take precedence
workbox.routing.registerRoute(
  /^https:\/\/www.google-analytics.com\/analytics.js/,
  new workbox.strategies.NetworkOnly({}),
  'GET',
)
workbox.googleAnalytics.initialize()

...希望浏览器磁盘缓存能为我提供analytics.js。

我做出了正确的决定吗？我应该在工作箱存储库上创建一个关于此的 GitHub 问题吗？

Answer 1

有两个相关点：

首先，用于不透明响应的 7MB 配额实际上并未转化为正在使用的磁盘空间。缓存大量不透明的响应可能会导致您的源超出浏览器施加的配额限制，但它不会转化为磁盘上的更多字节。我个人不会花时间担心缓存单个不透明的响应。

其次，它是加载 Google Analytics JavaScript 的 HTML 文档，它决定了在发出https://www.google-analytics.com/analytics.js 的请求时是否使用了 CORS。

workbox-google-analytics 包含将拦截https://www.google-analytics.com/analytics.js 的fetch 事件并应用缓存策略的代码，但在fetch 事件被拦截时，event.request.mode 已经设置为@ 987654329@或'no-cors'。

如果您希望使用 CORS 发出对 https://www.google-analytics.com/analytics.js 的请求，您可以更新您的 HTML 以包含 crossorigin attribute，如下所示：

<script crossorigin async src="https://www.google-analytics.com/analytics.js">

这假设远程服务器实际上支持 CORS，但并非所有服务器都支持。但这是一般的做法。

（如果you're injecting GA <script> 标记通过JavaScript 进入您的页面，那么您需要在动态创建的脚本元素上调用setAttribute('crossorigin', '')。）