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 Interface nimmt eine URL, ruft diese ab und fügt das resultierende Antwortobjekt dem angegebenen Cache hinzu.

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

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.

Hinweis:>add() wird jedes zuvor im Cache gespeicherte Schlüssel/Werte-Paar überschreiben, das mit der Anfrage übereinstimmt.

Syntax

add(request)

Parameter

request

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

Dieser Parameter wird als Parameter für 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 200-Bereich (d.h. es ist keine erfolgreiche Antwort). Dies tritt auf, wenn die Anfrage nicht erfolgreich ist, aber auch, wenn die Anfrage eine cross-origin no-cors Anfrage ist (in diesem Fall ist der gemeldete Status immer 0).

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 aus dem Aufruf von CacheStorage.open, um einen neuen Cache zu erstellen, und dann Cache.add zu verwenden, um ein Asset hinzuzufügen.

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

Spezifikationen

Specification
Service Workers # cache-add