使用 UTM 查询预缓存时重复获取请求

Question

我打算 post 在 Workbox Github 存储库中执行此操作，但我怀疑这是一个错误，更可能是我自己的误解。 我有发现了一些稍微相似的问题，但 none 的答案似乎清楚地解释了我如何解决我的问题。

在我的 sw.js 文件中，我预缓存了主页 URL 和开始 URL。 Start URL 与 Home URL 完全相同，只是它在 URL 后附加了 ?utm_source=pwa。这是我读过的一种技术，其他人在 Google Analytics 中跟踪 PWA 使用情况，我喜欢这个想法。

但是，现在当新用户到达该网站时，他们会加载初始页面，然后 Workbox 获取首页 URL 和然后获取开始 URL。这意味着如果用户到达网站的主页，他们将加载该页面 3 次。我想弄清楚如何让 Workbox 意识到 Home URL 和 Start URL 本质上是相同的并且不需要第三个获取请求。

我知道 ignoreUrlParametersMatching 默认使用 [/^utm_/] 我希望它按照我上面描述的那样做，但也许我理解不正确并且它不适用于预取 URLs...？如果我没有明确地从 precacheAndRoute() 调用它，它会自动应用吗？

澄清我对 ignoreUrlParametersMatching 的期望是它预缓存 Home URL 然后当它尝试缓存 Start URL 它忽略（删除）UTM 参数，看到它已经缓存了 URL 并且不获取。然后，当从缓存中请求 Start URL 时，它会再次忽略 UTM 参数并使用缓存中的 URL 进行响应。 这与现实相去甚远吗？ 如果是这样，我应该如何做到这一点才能实现我的跟踪和减少 "duplicate" 获取？

以下是我的 sw.js 文件的一些摘录：

const HOME_URL = 'https://gearside.com/nebula/';
const START_URL = 'https://gearside.com/nebula/?utm_source=pwa';

workbox.precaching.precacheAndRoute([
    //...other precached files
    {url: HOME_URL, revision: revisionNumber},
    {url: START_URL, revision: revisionNumber},
]);

两个 URL 都已预缓存：

显示两个提取请求：

注意：无论有无修订号，我都注意到了这个问题。

Answer 1

TL;DR

不要在预缓存清单中包含 https://gearside.com/nebula/?utm_source=pwa。
使用workbox-google-analytics模块：

import * as googleAnalytics from 'workbox-google-analytics';

googleAnalytics.initialize();

长版

您应该根据独特的资源进行预缓存。预缓存清单中定义的每个条目都将被下载和缓存。

如果https://gearside.com/nebula/和https://gearside.com/nebula/?utm_source=pwa提供完全相同的内容，只预缓存其中之一（最好是没有查询字符串的那个）。

选项 ignoreURLParametersMatching 用于指定将针对查询参数进行测试的正则表达式数组，如果其中任何一个匹配，则路由匹配将忽略此类查询参数。

举个例子，

precacheAndRoute([
  {url: '/styles/main.css', revision: '777'},
], {
  ignoreURLParametersMatching: [/.*/]
});

将匹配以下任何请求：

/styles/main.css
/styles/main.css?minified=0
/styles/main.css?minified=0&renew=1

并提供 /styles/main.css，因为正则表达式 .* 匹配 any 查询字符串。

ignoreURLParametersMatching的默认值为[/^utm_/]。如果在上面的示例中我们跳过 ignoreURLParametersMatching，将匹配以下任何请求（并使用预缓存的 /styles/main.css 解析）：

/styles/main.css
/styles/main.css?utm_hello=yes
/styles/main.css?utm_yes_what=dunno&utm_really=yeah

但以下请求不会通过预缓存：

/styles/main.css?remodelate=expensive&utm_pwa=no
/styles/main.css?utm_spa=neither&trees=awesome

因为其中 none 个仅具有以 utm_ 开头的查询参数。

有关 workbox-google-analytics 模块的更多信息可在此处找到：Workbox Google Analytics

使用 UTM 查询预缓存时重复获取请求

Duplicate fetch request when precaching with UTM query

google-analytics

workbox

TL;DR

长版