workbox-google-analytics / service-worker 离线分析：“无法使用 'in' 运算符在 undefined 中搜索 'sync'

Question

我看到有人问过其他类似的问题，错误是在主 js 文件而不是 service-worker.js 文件中包含分析代码。在这种情况下，所有代码都在 service-worker.js 文件中。

设置：node 16.0.0（对node15.x.x也一样），静态站点用eleventy

搭建

对于 google 分析，我使用 analytics.js 文件。基本上这是添加了一些其他选项：

<!-- Google Analytics -->
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
<!-- End Google Analytics -->

服务-worker.js 有问题的代码：

import * as googleAnalytics from 'workbox-google-analytics';
googleAnalytics.initialize({
  parameterOverrides: {
    cd1: 'offline',
  },
});

Service Worker 总的来说工作得很好。它有各种路由例程、预缓存等，google 分析代码似乎在做它应该做的事情。我可以在离线时看到项目缓存在 IndexedDB 中，然后在连接恢复时清除队列。我还可以在我的 google 分析页面上看到 'offline' 的命中率，如上面代码中的 parameterOverrides 所述。

...所以一切看起来都很好，但在控制台中我仍然得到以下信息：

service-worker.js?hash=4f292a2050:4259 Uncaught (in promise) TypeError: Cannot use 'in' operator to search for 'sync' in undefined
at Queue._addSyncListener (service-worker.js?hash=4f292a2050:4259)
at new Queue (service-worker.js?hash=4f292a2050:4077)
at new BackgroundSyncPlugin (service-worker.js?hash=4f292a2050:4341)
at initialize (service-worker.js?hash=4f292a2050:4515)
at service-worker.js?hash=4f292a2050:4647
at service-worker.js?hash=4f292a2050:65

我还没有运行 service worker through terser，所以任何想看的人都可以阅读它。

https://www.thetestspecimen.com/（然后在dev tools-->application-->service-worker.js）

我还应该注意，如果我使用标准：

googleAnalytics.initialize();

它仍然做同样的事情。

显然有些不对劲，但我想不通是什么。任何建议表示赞赏

Answer 1

I have seen that other similar questions have been asked, and that the error was having the analytics code in the main js file rather than the service-worker.js file. In this case all the code is in the service-worker.js file.

事实上，这就是这里发生的事情。 https://www.thetestspecimen.com/ 的 HTML 包括

<script async="" defer="" src="/service-worker.js?hash=4afd6f55e2"></script>

这意味着在 ServiceWorkerGlobalScope（其中 self.registration is defined）的上下文中运行的代码在 [=13] 中是运行 =] 全局范围，其中 self.registration 是 undefined。这就是导致 Cannot use 'in' operator to search for 'sync' in undefined 运行时间错误的原因。

只需调整您的构建以确保您不会以 <script> 标记作为主应用程序的一部分执行您的服务工作者代码，您应该没问题。

workbox-google-analytics / service-worker 离线分析：“无法使用 'in' 运算符在 undefined 中搜索 'sync'

workbox-google-analytics / service-worker offline analytics: "Cannot use 'in' operator to search for 'sync' in undefined

node.js

google-analytics

service-worker

offline

workbox