开篇
在使用Hexo的Solitude主题时，我偶然看到了博主叶泯希的一篇教程，其中提到通过添加SWPP（Service Worker Progressive Plugin）可以显著提升博客的访问速度。出于对性能优化的追求，我毫不犹豫地进行了配置。然而，这个决定却为我后续的维护工作带来了意想不到的困扰。
一、痛苦的开始
某天，纸鹿突然在群里艾特我，并附上了我站点的截图。他反馈说，我的文章更新在他那边无法正常显示。
- 2024-11-29 19:17:18
- 纸鹿
唉，SW。
- 纸鹿
@栖童 SW把你首页的文章更新都吞掉了。
- 栖童
更换主题之后一直没弄SWPP。
- 栖童
@纸鹿 Hexo时期弄的，这玩意残留这么大吗？
- 纸鹿
之前的文章有写过滥用 Service Worker + CacheStorage 的后果。
随后群友天翔也在群内发了很多关于SWPP的说明与讲解。
原来，SWPP虽然能通过缓存机制加速页面加载，但如果配置不当或更新机制不完善，很容易导致用户端缓存无法及时更新。尤其当博客内容频繁更新或主题结构发生变化时，旧的Service Worker可能会继续拦截请求，返回过时的静态资源，从而出现页面显示异常、文章不更新等问题。
二、解决方案
为了解决这个问题，我写了一个自毁SWPP的 S 脚本，以解决显示旧内容的问题。
// 清理 Service Worker 和缓存 (仅在客户端环境下执行)
if (import.meta.client) {
// 清理 Service Worker
if ('serviceWorker' in navigator) {
navigator.serviceWorker.getRegistrations().then(function(registrations) {
// 注销所有已注册的 Service Worker
for (let registration of registrations) {
registration.unregister();
console.log('Service Worker 已注销: ', registration.scope);
}
});
}
// 可选：清除所有缓存存储 (CacheStorage)
if ('caches' in window) {
caches.keys().then(function(cacheNames) {
cacheNames.forEach(function(cacheName) {
caches.delete(cacheName);
console.log('缓存已删除: ', cacheName);
});
});
}
}
但群友御守和天翔指出：已经加载了Service Worker的页面，根本运行不到这段脚本（该脚本部分用户有效）。
目前我已经在各大站点群组以及个人的QQ发布通知，并在我个人的社交媒体发布了手动清理SWPP的方法。
清理方法如下：
- 打开开发者工具在您的博客页面上，按 F12 键打开开发者工具（或右键选择“检查”），确保页面已加载完成。
- 进入Application面板在开发者工具顶部标签栏中点击 “Application”（应用程序）。如未直接看到，可在“更多工具”菜单中查找。
- 卸载Service Worker在左侧栏展开 “Service Workers”，点击右侧的“Unregister”按钮。
- 清除站点数据在左侧栏点击 “Storage”（存储），在右侧找到并点击 “Clear site data”（清除站点数据）按钮。
- 强制刷新页面关闭开发者工具，按 Ctrl + F5（Windows/Linux）或 Cmd + Shift + R（Mac）重新加载页面。
- 移动端清理方法移动端浏览器通常可以在“设置” → “隐私与安全” → “清除浏览数据”中，勾选“缓存文件”和“网站数据”来清理。
- 若问题依旧如果按上述步骤操作后问题仍然存在，可以尝试在浏览器的设置中，进入隐私与安全选项，清除所有时间范围的“缓存的图片和文件”以及“Cookie 及其他网站数据”。这能更全面地清理缓存。
三、经验与反思
这次经历让我深刻意识到，技术选型不能仅追求性能提升，还需全面考虑其长期维护成本和潜在风险。SWPP 这类强缓存策略若滥用或疏于管理，反而会成为用户体验的“隐形杀手”。
四、结语
技术本身是工具，善用则利，滥用则弊。希望我的教训能为大家提供一些参考。