滥用SWPP的后果

开篇

在使用 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 的 TS 脚本，以解决显示旧内容的问题。

// 清理 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 及其他网站数据”。这能更全面地清理缓存。