尝试加载时 Service Worker 获取错误 --- 我的网站？答案

【问题标题】：Service Worker Fetch Error When Trying to Load --- My Website?尝试加载时 Service Worker 获取错误 --- 我的网站？
【发布时间】：2021-03-23 20:16:35
【问题描述】：

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

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

我从this SO post 发现观看网络选项卡以找出导致问题的资源。

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

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

【问题讨论】：

标签： progressive-web-apps service-worker amazon-cloudfront workbox

【解决方案1】：

您看到的是由于 Chrome 89+ 中的 new offline support detection。

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

如果您的 Service Worker 使用网络优先策略来响应导航请求，则网络面板中可能会记录失败的网络请求，即使由于缓存响应而最终检查成功。

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

【讨论】：

谢谢！你似乎很了解这些东西。你能看看我在stackoverflow.com/questions/66755465/…的相关SO帖子吗？我的服务人员说它正在注册，但 Lighthouse 说“未检测到匹配的服务人员。”
更新——我想我解决了。我正在将有关它的信息添加到我在最后一条评论中链接的那篇文章中。
如果您选中了“清除存储”，Lighthouse 将始终未能通过您的 PWA 分数是否正确？
嗨，Jeff Posnik，非常感谢您提供这些信息。我在这篇帖子https://stackoverflow.com/questions/.. 中问了一个关于一个非常相似的问题的问题，但实际上我不确定它是否完全相同。我没有在网络选项卡中获取失败，而是在控制台中显示错误消息。也许你可以看看我的帖子，如果是同样的问题给我反馈。知道是否可以防止错误发生会很有趣。