JavaScript 中 Service Worker 怎么清除失效的旧缓存空间-js教程-PHP中文网

service worker 的旧缓存需手动清理，最佳方式是在 activate 阶段通过白名单保留当前有效缓存名并删除其余缓存；紧急时可通过开发者工具定位删除，开发调试可用全局清空+强制重载；长期应每次更新 sw 时同步更新缓存名并调用 skipwaiting()。

javascript 中 service worker 怎么清除失效的旧缓存空间

Service Worker 的旧缓存不会自动清理，尤其当新版本注册但未正确激活、或缓存命名未更新时，旧缓存（如 `v1`、`sw-cache-20250101`）会长期驻留，占用磁盘空间并干扰新版逻辑。清除失效缓存的关键是**切断旧缓存与 Service Worker 的绑定关系，并主动删除对应 Cache Storage 条目**。

在 activate 阶段自动清理旧缓存

这是最规范、推荐在代码中实现的方式。新版 SW 激活时，应主动遍历所有已存缓存名，只保留当前版本，其余全部删除：

示例代码（写入你的 sw.js 中）：

self.addEventListener('activate', event => {
  const validCacheNames = ['v2', 'static-v2', 'dynamic-v2']; // 当前有效缓存名列表
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cacheName => {
          if (!validCacheNames.includes(cacheName)) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

注意：不要硬编码旧缓存名，而是用明确的白名单（如上线时确定的 v2），避免遗漏或误删；同时确保每次发版都更新这个列表。

Java Linux版

Java Linux版下载入口，提供 Oracle JDK 26.0.2 官方 Linux 安装包、Java 环境配置、JDBC 数据库连接和 Java 服务端开发相关信息。

下载

手动定位并删除失效 Cache Storage

当线上已部署但未更新 SW 代码，或需紧急清理时，可通过开发者工具精准操作：

打开目标网站 → F12 → Application → 左侧展开 Cache Storage
右侧列出所有缓存名称，识别明显过时的条目（如含 v1、old-、年份早于当前的日期戳）
不确定时，先刷新页面，观察哪些缓存项不再新增请求记录（Network 面板中无对应 fetch），即为失效缓存
右键每个疑似项 → Delete；若提示“正在使用”，先回到 Service Workers 页面点击 Unregister 对应 worker

全局清空 + 强制重载组合操作

适用于开发调试或用户端快速恢复：

关闭所有同域名页面（包括后台标签页）
F12 → Application → Clear storage → 勾选 Cache storage 和 Service Workers → Clear site data
再按 Ctrl+Shift+R（Windows/Linux）或 Cmd+Shift+R（macOS）强制重载，跳过内存缓存和 SW 拦截
刷新后检查 Network 面板：关键资源响应码应为 200（来自网络），而非 200 (from ServiceWorker)