Service Workers缓存策略错，更新不及时！

博客主页瑕疵的CSDN主页 Gitee主页瑕疵的gitee主页⏩ 文章专栏《热点资讯》Service Workers缓存策略坑更新不及时我直接裂开了目录昨天上线新功能用户反馈说还是老界面。我打开控制台一看Service Worker在加载旧JS文件。我当场裂开。问题在哪缓存策略写死。用v1当缓存名新版本部署浏览器以为没变继续用老缓存。不是Service Worker bug是人设错了。核心根源浏览器缓存机制。Service Worker注册时用cacheName管理缓存。如果cacheName固定浏览器就认为资源没更新跳过下载。你写死v1它就一直用v1的缓存。简单粗暴但致命。看代码// 旧错误固定缓存名永远用老数据constCACHE_NAMEv1;// 每次部署都用这个浏览器缓存老文件// 注释部署新版本缓存名没变浏览器直接返回老资源// 结果用户看到旧功能更新失败// 实测我上线v2用户还是v1界面正确写法// 新正确动态生成缓存名强制更新constCACHE_NAMEv1-Date.now();// 部署时用构建hash更好比如v1-abc123// 注释每次注册Service Worker生成新缓存名// 浏览器会重新下载所有资源不再用老缓存// 实测更新后用户看到新功能秒生效对比关键点旧CACHE_NAME v1→ 缓存名不变 → 浏览器用老缓存新CACHE_NAME v1- Date.now()→ 缓存名变 → 浏览器拉新资源避坑总结别用v1、v2这种死名字。蠢。用动态值时间戳Date.now()或构建hash比如Webpack的[hash]。测试时手动触发更新开发者工具Network → 勾选Disable cache → 刷新页面。我栽过部署完用户说没更新。查了1小时才明白是缓存名。吐血。记住Service Workers不是魔法。缓存策略写错了你和用户一起哭。别信网上教程说“缓存自动更新”。那是骗人的。手动处理版本号不然你天天被用户问“怎么还不更新”。