JavaScript 中 Service Worker 怎么在测试环境中安全注销-js教程-PHP中文网

安全注销 service worker 需主动解除注册、清理 cache api 缓存、配合 devtools 手动操作，并验证注销结果。一、用 navigator.serviceworker.getregistrations() 获取并 unregister 所有注册；二、用 caches.keys() 和 caches.delete() 清空缓存；三、在 devtools 中勾选 update on reload、点击 unregister 或 clear site data；四、检查 console、application 和 network 面板确认无 sw 痕迹。

javascript 中 service worker 怎么在测试环境中安全注销

在测试环境中安全注销 Service Worker，核心是主动解除注册、清理缓存、并确保浏览器不再使用旧版本——不是等它自然失效，而是手动干预闭环。

一、用 JavaScript 主动注销已注册的 SW

在测试页面或 DevTools Console 中执行以下代码，可批量注销当前 origin 下所有注册：

navigator.serviceWorker.getRegistrations() 获取全部注册实例
对每个 registration 调用 .unregister()，返回 Promise
用 Promise.all() 确保全部完成后再刷新

示例代码：

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.getRegistrations()
    .then(registrations => {
      return Promise.all(
        registrations.map(reg => reg.unregister())
      );
    })
    .then(() => {
      console.log('✅ 所有 Service Worker 已注销');
      location.reload(true); // 强制硬刷新，跳过内存缓存
    });
}

二、清除关联的 Cache API 缓存

注销 SW 不会自动删缓存，必须显式清理，否则下次注册可能误用旧资源：

Java JDK 25

Java JDK 25 来自 OpenJDK 官方归档，版本为 JDK 25，本条下载地址已指向官方 Windows x64 zip 安装包直链，适合调试旧项目或兼容旧版 Java 运行环境。

下载

调用 caches.keys() 获取所有缓存名（如 'static-v1', 'pages-cache'）
逐个调用 caches.delete(cacheName)
同样建议包裹在 Promise.all 中，避免遗漏

可在 DevTools Console 直接运行：

if ('caches' in window) {
  caches.keys().then(keys => {
    return Promise.all(keys.map(key => caches.delete(key)));
  }).then(() => console.log('?️ 所有 Cache API 缓存已清空'));
}

三、DevTools 手动辅助操作（推荐配合使用）

仅靠 JS 有时无法覆盖“waiting”或“installing”状态的 SW，需人工介入：

打开 Chrome/Firefox DevTools → Application → Service Workers
勾选 Update on reload（防止刷新后自动重注册）
点击 Unregister 按钮；若灰显，先点 Skip waiting
再前往 Application → Clear storage → 勾选 Cache storage + Service workers → Clear site data