使用Cloudfront CDN进行PWA设置? [英] PWA Setup with Cloudfront CDN?

问题描述

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

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

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

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

灯塔告诉我这一点:

未检测到匹配的服务程序.您可能需要重新加载页面，或检查当前页面的服务工作者的范围包围范围并从清单中开始URL.

注册服务工作者时，我尝试了多个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:

  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.

  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设置?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！