使用 Cloudfront CDN 设置 PWA？

Question

在我添加与 Cloudfront CDN 的集成之前，我的网络应用程序有一个工作正常的服务工作者。

我像这样在客户端上注册 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 告诉我的是：

No matching service worker detected. You may need to reload the page, or check that the scope of the service worker for the current page encloses the scope and start URL from the manifest.

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

• "/sw.js"
• "https://www.my-域名.com/sw.js"
• "https://###.cloudfront.net/sw.js"

...但到目前为止 none 有效。

我错过了什么？

更新

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

• 我从 @JeffPosnick 给我相关的 SO post 。这解释了错误。
• “获取失败”的 URL 是我的清单“start_url”中指定的 URL。 但是 我在这里仍然遇到获取错误，即使在 Lighthouse 测试之外也是如此。有人知道为什么吗？
• 我取消选中 Lighthouse 的“清除存储”复选框。现在 Lighthouse 说我的服务人员正在工作。

理论：当 Lighthouse 清除存储时，它会把 service worker 吓跑，这解释了为什么我在选中“清除存储”时从 Lighthouse 得到一个失败的 PWA 分数。这个理论正确吗？

Answer 1

好的，我终于搞定了。除了我 post 在对原始 post 的更新中编辑的东西外，我还必须找到一个可以与 React 一起工作的服务工作者。

我选择了 this one。

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