更换CDN后Service Worker未识别变更的问题求助

核心排查与修复方向 #

1. 检查Service Worker脚本本身的加载逻辑 #

• 确认页面中注册Service Worker的代码已切换到新CDN地址：如果仍指向旧CDN的SW脚本，浏览器会持续使用旧的Worker，不会主动拉取新CDN的更新。
• 给SW脚本设置正确的缓存策略：旧CDN可能给SW脚本加了长缓存，导致浏览器不重新请求新CDN的脚本。建议给SW脚本本身设置短缓存时间（如Cache-Control: max-age=60），或者给SW文件名添加哈希（如sw.abc123.js），确保变更时能触发浏览器更新。

2. 修正资源匹配规则 #

• 检查SW的缓存匹配逻辑是否硬编码了旧CDN域名：比如之前缓存规则写死https://old-cdn.com/js/*.js，新CDN域名变更后，新资源https://new-cdn.com/js/app.456.js不会被识别为新内容。需改为相对路径（如/js/*.js）或通配符域名匹配。

3. 清理遗留缓存 #

• 手动测试验证：打开浏览器开发者工具（F12）→ Application → Service Workers，点击Unregister，再清空Cache Storage和IndexedDB中的旧缓存，刷新页面看是否加载新资源。
• 生产环境自动处理：在新SW的activate事件中添加逻辑，遍历所有缓存键，删除包含旧CDN域名的缓存条目，确保激活时清理旧资源。

4. 校验新CDN的缓存配置 #

• 确认带哈希的文件（filename.hash.js）缓存策略正确：这类文件可设置长缓存（如max-age=31536000），但需确保新CDN边缘节点已同步最新文件——直接访问新CDN的文件URL，对比内容是否为最新版本。
• 检查新CDN是否开启了「忽略查询参数生成缓存键」这类设置：虽然哈希在文件名中不影响，但避免因额外配置导致缓存异常。

快速验证步骤 #

1. 直接访问新CDN的SW脚本URL，确认内容为最新，且响应头无强制缓存。
2. 访问新CDN的filename.hash.js文件，对比本地缓存内容，确认哈希对应最新代码。
3. 在浏览器开发者工具Network面板勾选Disable cache，刷新页面，观察SW是否触发更新。

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