删除Service Worker缓存时caches.keys()报错崩溃求助

这个报错确实有点反直觉——毕竟Chrome 72+已经完全支持Cache API了，但结合你提到的Windows Chrome环境，我碰到过几个高频触发的原因，给你拆解下：

可能的触发原因 #

• 浏览器插件/隐私工具干扰：这是最常见的情况。很多Windows用户会装广告拦截器、隐私保护类插件（比如uBlock Origin、Privacy Badger），这类插件可能会在特定场景下修改或禁用caches对象的方法，导致caches.keys变成undefined。
• 无痕模式的兼容性问题：虽然Chrome后来放宽了无痕模式对Service Worker的限制，但在72-74版本的早期无痕模式中，caches对象可能存在，但内部方法未被正确初始化，调用时就会抛出异常。
• 非HTTPS环境（localhost除外）：Chrome要求Service Worker和Cache API必须在HTTPS环境下运行（localhost是例外）。如果用户通过HTTP访问页面，哪怕caches在window上存在，调用其方法也可能出现无效或报错的情况。
• 代码执行时机过早：如果你的代码在页面还未完全初始化（比如DOMContentLoaded事件触发前）就执行，可能会遇到caches对象还没被浏览器完全挂载的情况，导致方法不可用。

修复方案 #

针对这些情况，你可以调整代码来避免崩溃：

1. 加强类型检查+异常捕获 #

在调用caches.keys()之前，不仅要检查caches是否存在，还要确认keys是一个函数，同时加上catch块处理异常：

if ('serviceWorker' in navigator) {
  if ('caches' in window && typeof caches.keys === 'function') {
    caches.keys().then((keyList) => {
      return Promise.all(keyList.map(function (key) {
        return caches.delete(key);
      }));
    }).catch(err => {
      // 捕获异常避免页面崩溃，也可以记录日志用于排查
      console.error('Failed to clear cache:', err);
    });
  }
}

2. 延迟代码执行时机 #

确保代码在页面完全加载后执行，比如放在DOMContentLoaded事件回调中：

document.addEventListener('DOMContentLoaded', () => {
  if ('serviceWorker' in navigator) {
    if ('caches' in window && typeof caches.keys === 'function') {
      caches.keys().then((keyList) => {
        return Promise.all(keyList.map(function (key) {
          return caches.delete(key);
        }));
      }).catch(err => {
        console.error('Failed to clear cache:', err);
      });
    }
  }
});

3. 友好提示用户排查环境 #

如果是插件或无痕模式导致的问题，你可以在捕获异常后给用户一个提示，比如建议他们暂时关闭插件或使用普通窗口访问。

额外建议 #

如果你是在Angular应用中使用，也可以考虑用Angular官方的SwUpdate服务来处理缓存更新——它内部已经做了大量兼容性处理，比手动操作caches API更稳定。

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