Workbox缓存清理问题：旧缓存未自动清理，手动清理是否安全？

没问题，手动在Service Worker的activate事件里清理旧缓存完全安全，甚至这其实是处理旧缓存冗余的标准做法之一～

先解释下为什么你遇到的情况里Workbox没自动清理：Workbox默认不会主动扫描并删除所有旧版本的缓存，除非你搭配使用了它的特定模块——比如用workbox-precaching管理预缓存资源（它会自动清理旧的预缓存文件），或者给缓存策略配置workbox-expiration插件（设置缓存过期规则，比如最大存储数量、最大存活时间）。你只是设置了缓存名称的suffix，Workbox并不知道哪些缓存属于“旧版本需要删除”的范畴，得你明确告知它清理规则。

而在activate事件里执行清理操作是非常稳妥的时机：这个阶段新的Service Worker已经完成激活，旧的Service Worker已经被完全接管，不会再有页面依赖旧缓存，所以此时删除旧缓存不会影响任何正在运行的用户页面。

给你一个更严谨的手动清理示例代码，避免误删其他无关缓存：

self.addEventListener('activate', (event) => {
  // 对应你设置的当前缓存版本后缀
  const currentVersion = 'v2';
  // 如果你设置了缓存前缀，也可以加上前缀过滤
  const cachePrefix = 'my-app';

  event.waitUntil(
    caches.keys().then((cacheNames) => {
      // 只删除属于当前应用、且版本不是最新的缓存
      const cachesToDelete = cacheNames.filter((name) => {
        return name.startsWith(cachePrefix) && !name.endsWith(currentVersion);
      });

      return Promise.all(cachesToDelete.map((cacheName) => caches.delete(cacheName)));
    })
  );
});

另外补充个小技巧：如果你不想手动写清理逻辑，也可以用Workbox的workbox-expiration插件给每个缓存策略配置自动过期，比如：

import { CacheFirst } from 'workbox-strategies';
import { ExpirationPlugin } from 'workbox-expiration';

new CacheFirst({
  cacheName: `my-app-images-v2`,
  plugins: [
    new ExpirationPlugin({
      maxEntries: 50, // 最多存50张图片
      maxAgeSeconds: 30 * 24 * 60 * 60, // 30天后自动过期
    }),
  ],
});

这样就不用手动写清理代码，插件会自动帮你管理缓存的生命周期。

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