Cache: match() 方法

语法

match(request)
match(request, options)

参数

请求

您尝试在 Cache 中查找响应的 Request。这可以是一个 Request 对象或一个 URL 字符串。

options 可选

一个设置 match 操作选项的对象。可用选项包括：

ignoreSearch

一个布尔值，指定是否忽略 URL 中的查询字符串。例如，如果设置为 true，在执行匹配时将忽略 http://foo.com/?value=bar 中的 ?value=bar 部分。默认值为 false。

ignoreMethod

一个布尔值，如果设置为 true，则阻止匹配操作验证 Request 的 http 方法（通常只允许 GET 和 HEAD）。默认为 false。

ignoreVary

一个布尔值，当设置为 true 时，表示匹配操作不执行 VARY 头部匹配 — 即，如果 URL 匹配，您将获得匹配，而无论 Response 对象是否具有 VARY 头部。默认为 false。

返回值

一个 Promise，它解析为第一个匹配请求的 Response，或者如果未找到匹配项，则解析为 undefined。

示例

此示例来自 自定义离线页面 示例（在线演示）。它使用缓存，在请求失败时提供选定的数据。当 fetch() 调用抛出异常时，会触发 catch() 子句。在 catch() 子句中，使用 match() 来返回正确的响应。

在此示例中，只有使用 GET HTTP 动词检索到的 HTML 文档才会被缓存。如果我们的 if () 条件为 false，那么这个 fetch 处理程序将不会拦截请求。如果注册了任何其他 fetch 处理程序，它们将有机会调用 event.respondWith()。如果没有 fetch 处理程序调用 event.respondWith()，浏览器将像没有 service worker 参与一样处理该请求。如果 fetch() 返回一个有效的 HTTP 响应，其响应代码在 4xx 或 5xx 范围内，则不会调用 catch()。

self.addEventListener("fetch", (event) => {
  // We only want to call event.respondWith() if this is a GET request for an HTML document.
  if (
    event.request.method === "GET" &&
    event.request.headers.get("accept").includes("text/html")
  ) {
    console.log("Handling fetch event for", event.request.url);
    event.respondWith(
      fetch(event.request).catch((e) => {
        console.error("Fetch failed; returning offline page instead.", e);
        return caches
          .open(OFFLINE_CACHE)
          .then((cache) => cache.match(OFFLINE_URL));
      }),
    );
  }
});

规范

浏览器兼容性

另见

• 使用 Service Workers
• Cache
• Window.caches 和 WorkerGlobalScope.caches