如何用 Cache API 的 matchAll 匹配并删除旧版本的静态资源-js教程-PHP中文网

cache api 没有 matchall() 方法，需用 cache.keys() + cache.match() + cache.delete() 组合实现旧资源清理；关键在 url 标准化、精准识别和安全删除。

如何用 cache api 的 matchall 匹配并删除旧版本的静态资源

matchAll 并不是 Cache API 的标准方法——Cache 接口本身没有 matchAll()。你可能混淆了 cache.keys()（获取所有缓存键）或 caches.keys()（获取所有缓存名称），或是误记为 IndexedDB 或其他 API 的方法。

真正用于匹配并批量处理旧版本静态资源的，是结合 cache.keys() + cache.match() + cache.delete() 的组合逻辑。重点不在“一次匹配全部”，而在于精准识别、安全比对、可控删除。

下面分三步说明实际可行的操作路径：

如何识别旧版本的静态资源

静态资源版本通常体现在 URL 中，比如：

/styles.css?v=1.2
/app.a5b3f.js（内容哈希）
/images/logo.png?ts=1712890000

但 cache.match() 默认严格比对完整 URL（含 query）。若想把带时间戳或随机参数的请求归为同一资源，需先标准化：

用 new URL(request.url) 解析，移除 search 参数
构造新 Request 对象：new Request(cleanUrl, { method: request.method })
再调用 cache.match(normalizedRequest) 尝试宽松匹配

也可以在缓存阶段就统一用 clean URL 存储，避免后期匹配困难。

如何批量删除某类旧资源（例如所有 v1 版本 CSS/JS）

假设你已用 static-v1 缓存了旧版资源，新版用 static-v2，那么清理逻辑应放在 activate 阶段：

self.addEventListener('activate', event => {
  const currentCaches = ['static-v2', 'images-v2'];
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames
          .filter(name => !currentCaches.includes(name))
          .map(name => caches.delete(name))
      );
    })
  );
});

⚠️ 注意：这删的是整个缓存空间（如 static-v1），不是单个文件。若只想删其中部分资源（比如只删旧版 JS，保留同名图片），则需打开旧缓存，逐个比对 key：

caches.open('static-v1').then(cache => {
  cache.keys().then(requests => {
    requests.forEach(req => {
      const url = new URL(req.url);
      if (url.pathname.endsWith('.js') && /v1\./.test(url.pathname)) {
        cache.delete(req);
      }
    });
  });
});

删除前建议加一层安全校验

直接 cache.delete(req) 不会报错，但也不反馈是否真删掉了（比如请求未命中缓存时返回 false）。可配合 .then(success => { if (!success) console.warn('Failed to delete:', req.url); }) 做简单确认。

另外，Request 对象不可复用：如果某个请求你既想 match() 又想 delete()，记得先 req.clone()，否则第二次操作会失败。

不复杂但容易忽略——Cache API 的删除动作是精确且静默的，它不会自动推断语义，全靠你定义“什么是旧”、“该不该删”、“删哪个缓存空间”。