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
Rückgabewert
Ein Promise, der mit undefined aufgelöst wird.
Ausnahmen
TypeError-
Wird zurückgegeben, wenn das URL-Schema nicht
httpoderhttpsist.
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
CacheStoragemitCacheStorage.match()gefunden wird. Falls ja, dienen Sie diese aus. - Falls nicht, öffnen Sie den
v1Cache mitopen(), legen die Standardnetzwerkanfrage im Cache mitCache.put()ab und geben einen Klon der Standardnetzwerkantwort mitreturn response.clone()zurück. Ein Klon ist notwendig, daput()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 |
Browser-Kompatibilität
Loading…