使用 Cloudfront CDN 设置 PWA？

Question

在我添加与 Cloudfront CDN 的集成之前，我的 Web 应用程序有一个运行良好的 Service Worker。

我正在客户端上注册服务工作者，如下所示：

    navigator.serviceWorker
        .register('https://www.my-domain-name.com/sw.js')
        .then(() => console.info('service worker registered.'))
        .catch(error => {
            console.log('Error registering serviceWorker: ', error)
        })

我在客户端控制台日志中得到了这个：

Lighthouse 告诉我：

未检测到匹配的 Service Worker。您可能需要重新加载页面， 或检查当前页面的 service worker 的范围 包含清单中的范围和起始 URL。

我在注册 Service Worker 时尝试了多个 URL，包括：

• “/sw.js”
• “https://www.my-domain-name.com/sw.js”
• “https://###.cloudfront.net/sw.js”

...但到目前为止还没有任何效果。

我错过了什么？

更新

我学到了很多，但仍有疑问：

• 我得到了很好的答复 @JeffPosnick 到我的相关 SO 帖子 here。这解释了错误。
• “获取失败”的 URL 是我的清单“start_url”中指定的 URL。 但是即使在 Lighthouse 测试之外，我仍然会收到一个 fetch 错误。有人知道为什么吗？
• 我取消选中 Lighthouse“清除存储”复选框。现在 Lighthouse 说我的服务人员正在工作。

理论：当 Lighthouse 清除存储时，它会吹走服务人员，这解释了为什么我在选中“清除存储”时从 Lighthouse 获得失败的 PWA 分数。这个理论正确吗？

Answer 1

好的，我终于让这一切正常了。除了我在原始帖子的更新中发布的内容之外，我还必须找到一个可以使用 React 的服务人员。

我选择了this one。

现在如果网络离线，我重新加载页面，我仍然可以看到我的 React 主页。不错！