使用Cloudfront CDN进行PWA设置?

问题描述

在我添加与Cloudfront CDN的集成之前，我的Web应用程序的服务人员工作正常.

我正在像这样在客户端上注册服务工作者:

  navigator.serviceWorker.register('https://www.my-domain-name.com/sw.js').then(()=> console.info('已注册服务工作者.')).catch(错误=> {console.log('错误注册serviceWorker:'，错误)}) 

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

灯塔告诉我这一点:

注册服务工作者时，我尝试了多个URL，包括:

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

...但是到目前为止，没有一个起作用.

我想念什么?

更新

我学到了很多东西，但仍然有疑问:

• 我得到了一个很好的答复@JeffPosnick到我相关的SO帖子

  理论:当Lighthouse清理存储空间时，它会炸毁服务人员，这说明了为什么当"Clear Storage"清除时，我从Lighthouse得到的PWA分数不合格.被检查.这个理论正确吗?

  解决方案

  好的，我终于使所有这些工作正常了.除了我在原始帖子的更新中发布的内容之外，我还必须找到一个可以与React配合使用的服务人员.

  我选择了这一个

  现在，如果网络处于脱机状态，并且我重新加载页面，我仍然可以看到我的React主页.很好！

  My web app has a service worker that was working fine before I added integration with Cloudfront CDN.

  I'm registering the service worker on the client like so:

      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)
          })
  

  I get this in the client console logs:

  And Lighthouse is telling me this:

  I've tried multiple URLs when registering the service worker, including:

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

  ...but so far none have worked.

  What am I missing?

  UPDATES

  I've learned a lot more but still have questions:

  • I got a great answer from@JeffPosnick to my related SO post here. That explained the errors.
  • The URL for "failed to fetch" was the URL specified in my manifest "start_url". But I'm still getting a fetch error here, even outside of Lighthouse testing. Anybody know why?
  • I unchecked the Lighthouse "Clear Storage" checkbox. Now Lighthouse is saying my service worker is working.

  Theory: when Lighthouse clears storage it blows away the service worker, explaining why I get a failing PWA score from Lighthouse when "Clear Storage" is checked. Is this theory correct?

  解决方案

  Okay, I finally got this all working. In addition to the things I posted in the update to the original post, I also had to find a service worker that would work with React.

  I went with this one.

  Now if the network is offline, and I reload the page, I still see my React home page. Nice!

  这篇关于使用Cloudfront CDN进行PWA设置?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！