Cache: put() 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 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.

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

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:

Prüfen, ob ein Treffer für die Anfrage im CacheStorage mithilfe von CacheStorage.match() gefunden wird. Wenn ja, diese bereitstellen.
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.
Sollte dies fehlschlagen (z.B. weil das Netzwerk nicht verfügbar ist), eine Ersatzantwort zurückgeben.

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