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.

Oft möchten Sie einfach nur eine oder mehrere Anfragen mit fetch() abrufen und das Ergebnis direkt Ihrem Cache hinzufügen. In solchen Fällen ist es besser, Cache.add()/Cache.addAll() zu verwenden, da sie Kurzbefehle 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() wird jedes zuvor im Cache gespeicherte Schlüssel/Wert-Paar, das mit der Anfrage übereinstimmt, überschreiben.

Note: Cache.add/Cache.addAll cachen keine Antworten mit Response.status-Werten, die nicht im 200er-Bereich liegen, wohingegen Cache.put Ihnen erlaubt, jedes beliebige Anfrage-/Antwortenpaar 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 mit der Anfrage abgleichen möchten.

Rückgabewert

Ein Promise, das 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 ansehen). Hier warten wir darauf, dass ein FetchEvent ausgelöst wird. Wir konstruieren eine benutzerdefinierte Antwort wie folgt:

Überprüfen Sie, ob ein Treffer für die Anfrage im CacheStorage mit CacheStorage.match() gefunden wird. Wenn ja, dient das als Antwort.
Wenn nicht, öffnen Sie den v1-Cache mit open(), legen die Standardnetzwerkanfrage im Cache ab mit Cache.put() und geben Sie einen Klon der Standardnetzwerkanfrage zurück mit return response.clone(). Ein Klon ist notwendig, da put() den Antwortinhalt verbraucht.
Wenn dies fehlschlägt (z. B. weil das Netzwerk ausfällt), 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