Cache: addAll() 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 addAll()-Methode der Cache-Schnittstelle nimmt ein Array von URLs, ruft sie ab und fügt die resultierenden Antwortobjekte dem angegebenen Cache hinzu. Die während des Abrufs erstellten Anforderungsobjekte werden zu Schlüsseln für die gespeicherten Antwortoperationen.

Hinweis:>addAll() überschreibt alle zuvor im Cache gespeicherten Schlüssel/Wert-Paare, die mit der Anforderung übereinstimmen, schlägt jedoch fehl, wenn ein resultierender put()-Vorgang einen vorherigen Cache-Eintrag überschreiben würde, der von derselben addAll()-Methode gespeichert wurde.

Syntax

js
addAll(requests)

Parameter

requests

Ein Array von Anfragen für die Ressourcen, die Sie dem Cache hinzufügen möchten. Diese können Request-Objekte oder URLs sein.

Diese Anfragen werden als Parameter für den Request()-Konstruktor verwendet, daher folgen die URLs denselben Regeln wie für diesen Konstruktor. Insbesondere können URLs relativ zur Basis-URL sein, die im Fensterkontext die baseURI des Dokuments und im Worker-Kontext WorkerGlobalScope.location ist.

Rückgabewert

Ein Promise, das mit undefined aufgelöst wird.

Ausnahmen

TypeError

Das URL-Schema ist nicht http oder https.

Der Response-Status befindet sich nicht im Bereich 200 (d.h. keine erfolgreiche Antwort). Dies tritt auf, wenn die Anforderung nicht erfolgreich zurückgegeben wird, aber auch, wenn es sich um eine cross-origin no-cors-Anforderung handelt (in diesem Fall wird der gemeldete Status immer 0 sein.)

Beispiele

Dieser Codeblock wartet darauf, dass ein InstallEvent ausgelöst wird und führt dann waitUntil() aus, um den Installationsprozess für die App zu handhaben. Dies besteht darin, CacheStorage.open aufzurufen, um einen neuen Cache zu erstellen, und dann addAll() zu verwenden, um eine Reihe von Assets hinzuzufügen.

js
this.addEventListener("install", (event) => {
  event.waitUntil(
    caches
      .open("v1")
      .then((cache) =>
        cache.addAll([
          "/",
          "/index.html",
          "/style.css",
          "/app.js",
          "/image-list.js",
          "/star-wars-logo.jpg",
          "/gallery/",
          "/gallery/bountyHunters.jpg",
          "/gallery/myLittleVader.jpg",
          "/gallery/snowTroopers.jpg",
        ]),
      ),
  );
});

Spezifikationen

Specification
Service Workers
# cache-addAll

Browser-Kompatibilität

Siehe auch