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