如何自动彻底移除已注销的Service Worker脚本sw.js？

问题背景 #

已通过代码成功注销指定Scope的Service Worker（控制台返回Unregistration success），但打开Chrome DevTools时，该Worker仍处于RUNNING状态（Installation Status为REDUNDANT），停留在Sources面板；关闭DevTools则自动清除。需要实现自动彻底移除的方案。

可行解决方案 #

1. 在Service Worker中监听状态变化，自动关闭 #

修改你的sw.js脚本，添加状态监听逻辑，当Worker变为redundant时自动关闭自己：

// sw.js
self.addEventListener('statechange', () => {
  // 当Worker变为冗余状态时，主动关闭
  if (self.state === 'redundant') {
    self.close();
  }
});

注意：如果当前运行的SW没有这段逻辑，需要先部署更新后的SW，让浏览器更新到新版本，再执行注销操作。这段逻辑能让注销后的SW主动终止，避免在DevTools中残留。

2. 注销完成后强制刷新页面 #

在注销操作完成后，强制刷新页面（绕过缓存），让浏览器终止旧的Service Worker进程：

// index.js
try {
  navigator.serviceWorker.getRegistrations().then((registrations) => {
    // 过滤并批量注销目标Scope的SW
    const unregisterTasks = registrations
      .filter(reg => reg.scope.endsWith('/my_scope/'))
      .map(reg => reg.unregister());

    Promise.all(unregisterTasks).then(results => {
      const allSuccess = results.every(res => res);
      if (allSuccess) {
        console.log('Service Worker注销成功');
        // 延迟1秒后强制刷新，给浏览器处理注销的时间
        setTimeout(() => {
          // true参数表示绕过缓存刷新
          location.reload(true);
        }, 1000);
      } else {
        console.log('部分Service Worker注销失败');
      }
    });
  }).catch(err => {
    console.log('Service Worker注销失败: ', err);
  });
} catch(e) {
  swRes['error'] = e.message;
}

强制刷新会让页面重新加载，此时浏览器不会再注册已注销的SW，同时会终止旧的运行中进程，即使DevTools打开也能清除Sources面板中的SW文件。

3. 自动化场景：使用Chrome调试协议终止（如Puppeteer） #

如果是自动化测试/部署后的清理场景，可以通过Chrome DevTools协议（CDP）主动终止Service Worker：

// Puppeteer示例代码
const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();
  await page.goto('https://my.site/my_scope/');

  // 获取所有Service Worker目标
  const targets = await browser.targets();
  const swTargets = targets.filter(target => target.type() === 'service_worker');

  for (const target of swTargets) {
    const session = await target.createCDPSession();
    // 终止指定Scope的Service Worker
    await session.send('ServiceWorker.stopWorker', {
      scopeURL: 'https://my.site/my_scope/'
    });
  }

  await browser.close();
})();

这个方案适用于自动化流程，无法在前端页面代码中直接使用。

原因说明 #

打开DevTools时，浏览器会保持Service Worker进程活跃以支持调试功能，因此即使注销后，进程仍会维持RUNNING状态。通过上述方案，要么让SW主动关闭，要么通过刷新页面让浏览器终止进程，从而实现彻底移除。

内容的提问来源于stack exchange，提问作者NN28