Question

我正在我的next.js应用程序中使用GTM，并且我正在使用next-offline，它内部使用workbox-webpack-plugin来提供离线支持，这是使用运行时缓存staleWhileRevalidate策略进行缓存的好主意gtm.js吗？

我的应用程序可以离线工作，并且可以离线保存分析数据，并通过导入以下脚本将其发送回在线状态：

// Initialize offline google analytics which will store failed analytics requests and try again later when connection is back
// it will also cache the analytics.js library
workbox.googleAnalytics.initialize({
  // using a custom dimension(cd1) to track online vs. offline interactions
  parameterOverrides: {
    cd1: "offline"
  },
  // Using a custom metric to track time requests spent in the queue
  hitFilter: params => {
    const queueTimeInSeconds = Math.round(params.get("qt") / 1000);
    params.set("cm1", queueTimeInSeconds);
  }
});

比方说，第二次访问的用户打开了我的主页，我使用带有networkFirst策略的运行时缓存来缓存html，因此，如果用户在完全脱机时再次访问了我的主页，他将获得一个可以正常运行的应用程序，尤其是使用相同的networkFirst运行时缓存策略来缓存api请求，但是在完全脱机的情况下，提取gtm.js的请求将返回404，并且分析不会脱机工作，因为gtm.js不会初始化获取fetch analytics.js的请求这将从工作箱缓存中提供。我的想法是使用staleWhileRevalidate策略来缓存gtm.js，这样即使用户以离线模式打开应用程序，离线分析也能正常工作，并且即使他重新联机，这些分析也会被工作箱重新发送。

这是个好主意吗？它会按预期工作还是会丢失某些东西？

Answer 1

我对gtm.js不熟悉，但是workbox-google-analytics will automatically创建了一个适当的运行时缓存路由来处理对analytics.js和gtag.js脚本的脱机访问为您：

Workbox Google Analytics（分析）正是这样做的。它还增加了获取处理程序来缓存analytics.js和gtag.js脚本，以便他们可以也可以离线运行。最后，重试失败的请求时 Google Analytics（分析）还会自动设置（或更新）网站中的qt 请求有效负载以确保Google Analytics（分析）中的时间戳反映原始用户互动的时间。

听起来gtm.js是从与gtag.js不同的URL加载的，并且其集合ping可能具有不同的语法，因此Workbox GitHub存储库中的filing a feature request要求{{1 }}听起来是最好的选择。

我是否应该使用Workbox运行时缓存staleWhileRevalidate来缓存gtm.js？

1 个答案: