Service worker 如何使用React配置Service Worker以防止在AWS CloudFront的新部署上出现未捕获的语法错误

在过去的几天里，我一直在阅读关于这个主题的帖子和Github问题，但我似乎仍然找不到适合我的设置的组合。希望有人能给我一个具体的解决方案。事情是这样的

我正在使用create react app v2和

sw precache

。构建通过CircleCI将新文件推送到S3，然后由CloudFront提供服务。构建的最后一步是使以前的CloudFront发行版无效

我遇到的问题是，当部署新构建并更新服务工作者时，下一个页面加载会抛出错误，因为服务工作者提供的捆绑文件不再存在。再说一遍，我可以在

www.example.com

加载该站点，但是如果我打开一个新选项卡并加载

www.example.com/test

，我会得到未捕获的语法错误

关于我的设置的一些注释

我在CloudFront中创建了一个行为，将

service worker.js的
最小和最大TTL
设置为
0

对于我的

sw precache config.js

，以下是我的设置：

当我在构建后加载第一个页面时，对于index.html，我看到以下响应：

状态代码：200 OK（来自ServiceWorker）

我的假设是，我希望index.html文件不被服务工作者缓存。但如果我这样做，我不会失去离线功能吗？我是否应该将index.html的运行时缓存设置为

networkFirst

，以便我可以始终请求它，但在脱机时返回缓存？如果是这样的话，情况会是这样的：

runtimeCaching: [
    urlPattern: '/index.html',
    handler: 'networkFirst'
]

---

我尝试过但没有成功的一些事情包括向用户显示一条消息，以便在发生这种情况时重新加载（技术上可行，但用户体验不是最佳的）。还查看了

skipWaiting:false

选项，但在新版本中仍看到相同的错误

您的问题可能与在用户浏览器中缓存service-worker.js有关，因此部署新版本时，旧的service-worker仍缓存在用户浏览器中

服务工作者文件的最小和最大TTL不应为0。您应该始终将其缓存在CloudFrontEdge上，因为您可以在新部署后运行失效请求以清除CloudFrontEdge缓存

问题可能与用户浏览器中的缓存有关。将文件上载到bucket时，可以尝试删除service-worker.js文件的缓存头。您可能希望看到CloudFrontEdge中的缓存与用户浏览器上的缓存之间的差异

我写了一篇文章讨论了这一点，以及如何部署单页应用程序和解决缓存问题。请看一看：

在本文中，我还讨论了单页应用程序上的软件预处理：

---

，

谢谢你的回答。读完你的文章后，我采取了以下两个步骤：1。删除了service-worker.js 2的特殊cloudfront行为。更新了我的部署脚本，以将index.html和service-worker.js文件复制回S3存储桶，且

--cache control max age=0，必须重新验证，public

flag我认为棘手的部分是，我必须运行两次更新才能看到这项工作，因为一旦浏览器缓存版本仍然存在，但一旦清除，它似乎就可以工作了。这有意义吗？没错！新部署后，您应该刷新网站并获取新内容。一旦您的服务人员从浏览器缓存过期，您就不应该再获得旧版本。这就是为什么我个人喜欢只从一天开始将文件缓存在浏览器中，如果我错误地缓存了某个文件，它将在第二天过期。此外，您应该检查CloudFront是否使用正确的缓存头为您的内容提供服务，只需使用“浏览器网络”选项卡检查您的请求，并查看缓存头是否正确传递。希望有帮助！

runtimeCaching: [
    urlPattern: '/index.html',
    handler: 'networkFirst'
]