progressive-web-apps - 尝试加载时 Service Worker 获取错误 --- 我的网站？

Question

我最近将 Cloudfront 添加到我的 Web 应用程序中。我正在使用 WorkBox 服务人员并收到错误消息：

VM7 workbox-strategies.prod.js:1 Uncaught (in promise) TypeError: Failed to fetch

我从这个 SO 帖子中发现观看网络选项卡以找出导致问题的资源。

我检查并发现 - 它正在尝试加载我自己的域！

域在浏览器中加载就好了。为什么服务人员会抛出这个 fetch 错误？

标签： progressive-web-appsservice-workeramazon-cloudfrontworkbox

Answer 1

您所看到的是由于 Chrome 89+ 中新的离线支持检测。

如果您的网站有网络应用清单和服务工作者，Chrome 将自动模拟离线连接，然后对start_url您的网络应用清单中列出的内容发出请求。

如果你的 service worker 使用网络优先策略来响应导航请求，那么网络面板中可能会记录一个失败的网络请求，即使由于缓存的响应而检查最终成功。

（Chrome DevTools 团队意识到这可能有点令人困惑，并且正在努力改进向开发人员报告的方式。）