Cache：add() 方法

Baseline 已廣泛支援

此功能已成熟，可跨多種裝置和瀏覽器版本工作。它自 ⁨2018 年 4 月⁩ 起已在所有瀏覽器中可用。

安全上下文： 此功能僅在安全上下文（HTTPS）中可用，且支援此功能的瀏覽器數量有限。

注意：此功能在 Web Workers 中可用。

Cache 介面的 add() 方法接收一個 URL，檢索該 URL，並將生成的響應物件新增到指定的快取中。

add() 方法在功能上等同於以下程式碼：

fetch(url).then((response) => {
  if (!response.ok) {
    throw new TypeError("bad response status");
  }
  return cache.put(url, response);
});

對於更復雜的操作，您需要直接使用 Cache.put()。

注意： add() 將覆蓋快取中先前儲存的與請求匹配的任何鍵/值對。

語法

add(request)

要新增到快取的資源的請求。這可以是一個 Request 物件或一個 URL。

此引數用作 Request() 建構函式的引數，因此 URL 遵循與該建構函式相同的規則。特別是，URL 可以相對於基本 URL，在視窗上下文中是文件的 baseURI，在 worker 上下文中是 WorkerGlobalScope.location。

一個 Promise，解析為 undefined。

URL 協議不是 http 或 https。

Response 狀態不在 200 範圍內（即，不是成功的響應）。這會在請求不成功時發生，也會在請求是跨域無 CORS 請求時發生（在這種情況下，報告的狀態始終為 0）。

此程式碼塊等待 InstallEvent 觸發，然後呼叫 waitUntil() 來處理應用程式的安裝過程。這包括呼叫 CacheStorage.open 來建立一個新快取，然後使用 Cache.add 將一個資源新增到其中。

this.addEventListener("install", (event) => {
  event.waitUntil(caches.open("v1").then((cache) => cache.add("/index.html")));
});

規範
Service Workers # cache-add

此頁面最後修改時間為 ⁨2025年6月24日⁩，作者為 MDN 貢獻者。