Angular 14 PWA服务端缓存问题：freshness策略仍读取缓存

你的配置理论上应该实现“优先请求后端API、仅在1秒网络超时后才 fallback 到缓存”的效果，因为：

• strategy: "freshness"：Service Worker会优先发起网络请求，成功后用新数据更新缓存并返回；仅当网络请求超时（你设置了1秒）时，才会使用缓存数据。
• maxAge: "0s"：缓存条目会被标记为立即过期，意味着即使缓存中存在旧数据，下次请求也必须触发网络优先逻辑，不会直接读取缓存。

但实际未生效，建议按以下步骤排查：

1. 确认Service Worker已更新配置 #

每次修改ngsw-config.json后，必须重新构建并部署应用，否则旧的Service Worker脚本不会加载新配置。

• 打开浏览器DevTools的Application > Service Workers面板，查看当前激活的Service Worker版本，确认是否为修改配置后的版本；也可点击Update按钮手动触发更新。

2. 检查URL匹配规则是否准确 #

确认实际请求的URL与配置的/api/equipments/**完全匹配：

• 注意路径大小写、是否带有额外前缀（如域名前缀），如果API请求是https://your-domain/api/equipments/4，可尝试将规则改为**/api/equipments/**来匹配带域名的路径。
• 打开DevTools的Application > Cache Storage，找到名为data的缓存组，查看其中的缓存条目，确认/api/equipments/4是否被归类到该组中。如果不在，说明URL规则未匹配成功。

3. 排除浏览器HTTP缓存干扰 #

后端API的响应头可能设置了过长的Cache-Control（如max-age=3600），导致浏览器直接使用本地缓存，完全不经过Service Worker。

• 在DevTools的Network面板勾选Disable cache（仅测试用），重新发起请求，观察是否能获取最新数据。如果可以，需要调整后端API的Cache-Control响应头，设置为no-cache或较短的过期时间。

4. 验证缓存策略的实际执行 #

在DevTools的Network面板查看/api/equipments/4的请求：

• 若请求由Service Worker处理，Initiator字段会显示ServiceWorker。
• 观察请求流程：应该先发起网络请求，若网络请求成功，返回200并更新缓存；若网络超时超过1秒，才会读取缓存数据。

5. 临时强制刷新方案（不推荐长期使用） #

如果以上排查都无法解决，可在API请求中添加唯一查询参数（如?t=${Date.now()}），让Service Worker认为是新URL，绕过缓存读取。但这是临时方案，建议优先修复Service Worker配置问题。

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