files/en-us/web/api/cache/add/index.md
{{APIRef("Service Workers API")}}{{SecureContext_Header}}{{AvailableInWorkers}}
The add() method of the {{domxref("Cache")}} interface takes a URL, retrieves it, and adds the resulting response object to the given cache.
The add() method is functionally equivalent to the following:
fetch(url).then((response) => {
if (!response.ok) {
throw new TypeError("bad response status");
}
return cache.put(url, response);
});
For more complex operations, you'll need to use {{domxref("Cache.put","Cache.put()")}} directly.
[!NOTE]
add()will overwrite any key/value pair previously stored in the cache that matches the request.
add(request)
request
: A request for the resource you want to add to the cache. This can be a {{domxref("Request")}} object or a URL.
This parameter is used as a parameter to the {{domxref("Request.Request()", "Request()")}} constructor, so URLs follow the same rules as for that constructor. In particular, URLs may be relative to the base URL, which is the document's {{domxref("Node.baseURI", "baseURI")}} in a window context, or {{domxref("WorkerGlobalScope.location")}} in a worker context.
A {{jsxref("Promise")}} that resolves with undefined.
: The URL scheme is not http or https.
The Response status is not in the 200 range (i.e., not a successful response.) This occurs if the request does not return successfully, but also if the request is a cross-origin no-cors request (in which case the reported status is always 0.)
This code block waits for an {{domxref("InstallEvent")}} to fire, then calls {{domxref("ExtendableEvent.waitUntil","waitUntil()")}} to handle the install process for the app. This consists of calling {{domxref("CacheStorage.open")}} to create a new cache, then using Cache.add to add an asset to it.
this.addEventListener("install", (event) => {
event.waitUntil(caches.open("v1").then((cache) => cache.add("/index.html")));
});
{{Specifications}}
{{Compat}}