Cache: put() Methode

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

Hinweis: Dieses Feature ist verfügbar in Web Workers.

Die put()-Methode der Cache-Schnittstelle ermöglicht es, Schlüssel/Wert-Paare zum aktuellen Cache-Objekt hinzuzufügen.

Häufig möchten Sie einfach nur eine oder mehrere Anfragen mit fetch() abrufen und das Ergebnis direkt zu Ihrem Cache hinzufügen. In solchen Fällen ist es besser, Cache.add()/Cache.addAll() zu verwenden, da dies Kurzfunktionen für eine oder mehrere dieser Operationen sind.

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

Note: put() überschreibt jedes zuvor im Cache gespeicherte Schlüssel/Wert-Paar, das der Anfrage entspricht.

Note: Cache.add/Cache.addAll cachen keine Antworten mit Response.status-Werten, die nicht im 200-Bereich liegen, während Cache.put jede Anfrage-/Antwort-Paarung speichern lässt. Infolgedessen können Cache.add/Cache.addAll nicht verwendet werden, um undurchsichtige Antworten zu speichern, während Cache.put dies kann.

Syntax

js
put(request, response)

Parameter

request

Das Request-Objekt oder die URL, die Sie dem Cache hinzufügen möchten.

response

Die Response, die Sie der Anfrage zuordnen möchten.

Rückgabewert

Ein Promise, das mit undefined erfüllt wird.

Ausnahmen

TypeError

Wird zurückgegeben, wenn das URL-Schema nicht http oder https ist.

Beispiele

Dieses Beispiel stammt aus dem MDN simple-service-worker Beispiel (siehe simple-service-worker live). Hier warten wir auf das Auftreten eines FetchEvent. Wir konstruieren eine benutzerdefinierte Antwort wie folgt:

  1. Prüfen, ob ein Treffer für die Anfrage im CacheStorage mithilfe von CacheStorage.match() gefunden wird. Wenn ja, diese bereitstellen.
  2. Falls nicht, den v1-Cache mit open() öffnen, die Standard-Netzwerkanfrage mit Cache.put() in den Cache legen und eine Kopie der Standard-Netzwerkanfrage mit return response.clone() zurückgeben. Clone ist erforderlich, da put() den Antwortkörper verbraucht.
  3. Sollte dies fehlschlagen (z.B. weil das Netzwerk nicht verfügbar ist), eine Ersatzantwort zurückgeben.
js
let response;
const cachedResponse = caches
  .match(event.request)
  .then((r) => (r !== undefined ? r : fetch(event.request)))
  .then((r) => {
    response = r;
    caches.open("v1").then((cache) => {
      cache.put(event.request, response);
    });
    return response.clone();
  })
  .catch(() => caches.match("/gallery/myLittleVader.jpg"));

Spezifikationen

Specification
Service Workers
# cache-put

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch