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

BCD tables only load in the browser

Siehe auch