如何通过HTML的cache.match方法从缓存中匹配请求返回缓存的响应-html教程-PHP中文网

cache.match 是 Cache 接口方法，用于在指定缓存中精确匹配请求的 URL、method 和 headers（含 query 参数顺序），返回第一个完全匹配的 Response；不支持模糊或前缀匹配，需在 Service Worker 上下文中调用且传入 Request 实例。

如何通过html的cache.match方法从缓存中匹配请求返回缓存的响应

cache.match 是什么，它匹配什么

cache.match 是 Service Worker 中 Cache 接口提供的方法，用于根据传入的 Request 对象，在指定缓存中查找**完全匹配的缓存响应（Response）**。它不支持模糊匹配、正则或部分 URL 匹配，只做「请求 URL + method + headers（部分）」的精确比对。

常见误解是以为它能像路由一样“匹配路径前缀”，比如传入 new Request('/api/') 就命中所有 /api/* 请求——实际不会。它只匹配完整 URL 字符串（忽略 query 参数顺序？不一定，见下条）。

match 方法默认是否忽略 query 参数顺序

不忽略。Chrome、Firefox 均将 query 参数顺序视为匹配的一部分。例如：

await cache.match(new Request('https://a.com/data?id=1&name=test'))

只能匹配到缓存中 URL 完全为 https://a.com/data?id=1&name=test 的条目，而无法匹配 https://a.com/data?name=test&id=1，即使语义等价。

解决办法是手动标准化 URL：

用 URL 构造函数解析，再按 key 排序拼接 searchParams
或直接在 cache.put() 阶段就统一存储标准化后的 URL
避免依赖 match 处理非规范请求，优先在 fetch 事件中 normalize 再 match

如何正确调用 cache.match 获取响应

必须确保：缓存已打开、请求对象合法、且在 Service Worker 的上下文中执行（如 fetch 事件里）。常见错误包括：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

在页面主线程直接调用 cache.match → 报错 cache is not defined
传入字符串而非 Request 实例 → 返回 undefined（部分浏览器静默失败）
未 await 或未处理 Promise → 得到 pending 状态的 Promise 而非 Response
缓存名写错，或缓存根本没 open 过 → match 返回 undefined

正确示例：

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.open('my-cache').then(cache =>
      cache.match(event.request).then(response => {
        return response || fetch(event.request);
      })
    )
  );
});