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 des Cache-Interfaces ermöglicht das Hinzufügen von Schlüssel/Wert-Paaren zum aktuellen Cache-Objekt.

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

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

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

Hinweis:>Cache.add/Cache.addAll speichern keine Antworten mit Response.status-Werten, die nicht im 200er-Bereich liegen, wohingegen Cache.put es ermöglicht, jedes Anfrage-/Antwortpaar zu speichern. Daher 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, der mit undefined aufgelöst 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 example (siehe simple-service-worker live ausführen). Hier warten wir auf das Auslösen eines FetchEvent. Wir konstruieren eine benutzerdefinierte Antwort folgendermaßen:

Überprüfen Sie, ob ein Treffer für die Anfrage im CacheStorage mit CacheStorage.match() gefunden wird. Falls ja, dienen Sie diese aus.
Falls nicht, öffnen Sie den v1 Cache mit open(), legen die Standardnetzwerkanfrage im Cache mit Cache.put() ab und geben einen Klon der Standardnetzwerkantwort mit return response.clone() zurück. Ein Klon ist notwendig, da put() den Antwortkörper verbraucht.
Falls dies fehlschlägt (z. B. weil das Netzwerk ausgefallen ist), geben Sie eine Ersatzantwort zurück.

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