Angular Service Worker本地正常，部署到S3+CloudFront后失效求助

我之前也碰到过一模一样的坑！本地调试时Service Worker的更新提示完美工作，一部署到S3+CloudFront+Route53的生产环境就彻底失效，折腾了好一阵才找到根源，给你分享几个关键排查点和解决办法：

1. 优先检查CloudFront的缓存策略（最常见原因） #

Angular Service Worker依赖ngsw.json文件来检测更新，如果CloudFront把这个文件缓存得太死，浏览器就拿不到最新的版本信息，自然不会触发更新提示：

• 给/ngsw.json和/service-worker.js单独设置缓存行为：在CloudFront控制台的“行为”页面，添加这两个路径的规则，设置缓存策略为“无缓存”（Cache-Control: no-cache, must-revalidate），或者把TTL设为0，强制浏览器每次都向CloudFront请求最新版本。
• 确认你的失效规则覆盖了正确的路径：除了index.html和service-worker.js，一定要加上ngsw.json！部署后手动触发失效，等个几分钟让CloudFront的边缘节点同步完成（有时候失效不是即时生效的）。

2. 验证S3文件的权限与托管设置 #

• 确保service-worker.js、ngsw.json和所有静态资源都是公开可读的，不然CloudFront无法从S3拉取最新文件，浏览器拿到的还是旧缓存。
• 确认S3的静态网站托管是启用状态，并且CloudFront的源指向正确的S3网站端点（不是S3 bucket的REST端点，避免路径匹配问题）。

3. 检查Angular SW的配置文件（ngsw-config.json） #

• 确认index字段正确指向"/index.html"，CloudFront的路径规则可能会影响SW对入口文件的定位。
• 检查assetGroups里的资源匹配模式：如果你的应用部署在子路径下，要调整patterns确保能匹配到所有资源；如果是根路径，默认的"**/*"一般没问题，但可以检查有没有遗漏关键的JS/CSS文件。
• 如果用到了dataGroups，确保它的缓存策略不会干扰SW的更新检测（比如不要设置过长的TTL或者忽略缓存验证）。

4. 用浏览器DevTools调试排查 #

打开Chrome DevTools的Application -> Service Workers面板：

• 查看当前激活的SW版本号，对比本地部署的版本，确认是不是旧版本在运行。
• 手动点击Update按钮，看能不能触发更新提示，如果可以，说明是缓存策略阻止了自动检测。
• 查看Network面板里ngsw.json的请求响应头，确认Cache-Control是预期的no-cache，并且返回了200（不是304缓存）。

5. 检查CloudFront的响应头设置 #

确保CloudFront没有篡改ETag或者Last-Modified头，Angular SW依赖这些头来判断资源是否更新。可以用curl -I https://your-domain/ngsw.json命令查看响应头，确认这些字段正确返回。

我当时就是因为CloudFront默认缓存了ngsw.json，导致SW一直拿不到新的版本信息，调整缓存策略并加上失效规则后就解决了。你可以从第一个点开始排查，大概率能解决问题！

内容的提问来源于stack exchange，提问作者Greg Harrison