Cache: add() Methode

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2018.

Sicherer Kontext: Diese Funktion ist nur in sicheren Kontexten (HTTPS) in einigen oder allen unterstützenden Browsern verfügbar.

Hinweis: Diese Funktion ist in Web Workers verfügbar.

Die add()-Methode des Cache-Interfaces nimmt eine URL, ruft sie ab und fügt das resultierende Antwortobjekt zum gegebenen Cache hinzu.

Die add()-Methode ist funktional äquivalent zu folgendem:

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

Für komplexere Operationen müssen Sie Cache.put() direkt verwenden.

Note: add() überschreibt jedes Schlüssel/Werte-Paar, das zuvor im Cache gespeichert wurde und die Anforderung übereinstimmt.

Syntax

js
add(request)

Parameter

request

Eine Anfrage für die Ressource, die Sie zum Cache hinzufügen möchten. Dies kann ein Request-Objekt oder eine URL sein.

Dieser Parameter wird als Parameter an den Request()-Konstruktor verwendet, sodass URLs denselben Regeln wie für diesen Konstruktor folgen. Insbesondere können URLs relativ zur Basis-URL sein, die im Fensterkontext die baseURI des Dokuments oder im Worker-Kontext WorkerGlobalScope.location ist.

Rückgabewert

Ein Promise, das mit undefined aufgelöst wird.

Ausnahmen

TypeError

Das URL-Schema ist nicht http oder https.

Der Antwortstatus liegt nicht im Bereich 200 (d.h. keine erfolgreiche Antwort). Dies tritt auf, wenn die Anforderung nicht erfolgreich zurückgegeben wird, aber auch wenn die Anforderung eine cross-origin no-cors Anfrage ist (in diesem Fall wird der gemeldete Status immer 0 sein.)

Beispiele

Dieser Codeblock wartet darauf, dass ein InstallEvent ausgelöst wird, und ruft dann waitUntil() auf, um den Installationsprozess für die App zu handhaben. Dies besteht darin, CacheStorage.open aufzurufen, um einen neuen Cache zu erstellen, und dann Cache.add zu verwenden, um ein Asset hinzuzufügen.

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

Spezifikationen

Specification
Service Workers
# cache-add

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
add

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.

Siehe auch