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

💓 博客主页：瑕疵的CSDN主页

📝 Gitee主页：瑕疵的gitee主页

⏩ 文章专栏：《热点资讯》

Service Workers缓存策略坑：更新不及时，我直接裂开了！

昨天上线新功能，用户反馈说还是老界面。我打开控制台一看，Service Worker在加载旧JS文件。我当场裂开。

问题在哪？缓存策略写死。用'v1'当缓存名，新版本部署，浏览器以为没变，继续用老缓存。不是Service Worker bug，是人设错了。

核心根源：浏览器缓存机制。Service Worker注册时，用cacheName管理缓存。如果cacheName固定，浏览器就认为资源没更新，跳过下载。你写死v1，它就一直用v1的缓存。简单粗暴，但致命。

看代码：

// 旧错误：固定缓存名，永远用老数据constCACHE_NAME='v1';// 每次部署都用这个，浏览器缓存老文件// 注释：部署新版本，缓存名没变，浏览器直接返回老资源// 结果：用户看到旧功能，更新失败// 实测：我上线v2，用户还是v1界面

正确写法：

// 新正确：动态生成缓存名，强制更新constCACHE_NAME='v1-'+Date.now();// 部署时用构建hash更好，比如v1-abc123// 注释：每次注册Service Worker，生成新缓存名// 浏览器会重新下载所有资源，不再用老缓存// 实测：更新后，用户看到新功能，秒生效

对比关键点：

• 旧：CACHE_NAME = 'v1'→ 缓存名不变 → 浏览器用老缓存
• 新：CACHE_NAME = 'v1-' + Date.now()→ 缓存名变 → 浏览器拉新资源

避坑总结：

1. 别用v1、v2这种死名字。蠢。
2. 用动态值：时间戳Date.now()或构建hash（比如Webpack的[hash]）。
3. 测试时手动触发更新：开发者工具Network → 勾选Disable cache → 刷新页面。
4. 我栽过：部署完，用户说没更新。查了1小时才明白是缓存名。吐血。

记住：Service Workers不是魔法。缓存策略写错了，你和用户一起哭。别信网上教程说“缓存自动更新”。那是骗人的。手动处理版本号，不然你天天被用户问“怎么还不更新”。