CacheStorage

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.

Das CacheStorage-Interface repräsentiert den Speicher für Cache-Objekte.

Das Interface:

  • Bietet ein Hauptverzeichnis aller benannten Caches, die von einem ServiceWorker oder einer anderen Art von Worker oder window-Kontext zugegriffen werden können (Sie sind nicht auf die Verwendung mit Service Workern beschränkt).
  • Verwaltet eine Zuordnung von Zeichenfolgen zu den entsprechenden Cache-Objekten.

Verwenden Sie CacheStorage.open(), um eine Cache-Instanz zu erhalten.

Verwenden Sie CacheStorage.match(), um zu überprüfen, ob eine gegebene Request ein Schlüssel in einem der Cache-Objekte ist, die das CacheStorage-Objekt verfolgt.

Sie können auf CacheStorage über die Window.caches-Eigenschaft in Fenstern oder über die WorkerGlobalScope.caches-Eigenschaft in Workern zugreifen.

Note: CacheStorage lehnt Anfragen auf nicht vertrauenswürdigen Ursprüngen (d.h. solchen, die kein HTTPS verwenden, obwohl diese Definition in Zukunft wahrscheinlich komplexer wird) immer mit einem SecurityError ab. Wenn Sie in Firefox testen, können Sie dies umgehen, indem Sie in den Firefox-DevTools-Optionen/dem Zahnrad-Menü die Option Enable Service Workers over HTTP (when toolbox is open) aktivieren. Außerdem kann CacheStorage aufgrund von Anforderungen an den Dateisystemzugriff im privaten Modus in Firefox nicht verfügbar sein.

Note: CacheStorage.match() ist eine Komfortmethode. Eine äquivalente Funktionalität, um einen Cache-Eintrag zu finden, kann implementiert werden, indem ein Array der Cachenamen von CacheStorage.keys() zurückgegeben, jeder Cache mit CacheStorage.open() geöffnet und der gewünschte mit Cache.match() abgeglichen wird.

Instanzmethoden

CacheStorage.match()

Überprüft, ob eine gegebene Request ein Schlüssel in einem der Cache-Objekte ist, die das CacheStorage-Objekt verfolgt, und gibt ein Promise zurück, das sich zu diesem Treffer auflöst.

CacheStorage.has()

Gibt ein Promise zurück, das sich zu true auflöst, wenn ein Cache-Objekt, das mit dem cacheName übereinstimmt, existiert.

CacheStorage.open()

Gibt ein Promise zurück, das sich zu dem Cache-Objekt auflöst, das mit dem cacheName übereinstimmt (ein neuer Cache wird erstellt, wenn er noch nicht existiert).

CacheStorage.delete()

Findet das Cache-Objekt, das mit dem cacheName übereinstimmt, und löscht es, falls gefunden. Gibt ein Promise zurück, das sich zu true auflöst. Wenn kein Cache-Objekt gefunden wird, löst es sich zu false auf.

CacheStorage.keys()

Gibt ein Promise zurück, das sich mit einem Array auflöst, das Zeichenfolgen enthält, die allen benannten Cache-Objekten entsprechen, die von CacheStorage verfolgt werden. Verwenden Sie diese Methode, um über eine Liste aller Cache-Objekte zu iterieren.

Beispiele

Dieser Codeausschnitt stammt aus dem MDN einfachen Service Worker Beispiel (siehe einfacher Service Worker live.) Dieses Service Worker-Skript wartet darauf, dass ein install-Ereignis ausgelöst wird, und führt dann waitUntil aus, um den Installationsprozess für die App durchzuführen. Dies besteht darin, CacheStorage.open aufzurufen, um einen neuen Cache zu erstellen, und dann Cache.addAll zu verwenden, um eine Reihe von Ressourcen hinzuzufügen.

Im zweiten Codeblock warten wir, bis ein FetchEvent ausgelöst wird. Wir konstruieren eine benutzerdefinierte Antwort wie folgt:

  1. Überprüfen Sie, ob ein Treffer für die Anforderung im CacheStorage gefunden wird. Wenn ja, liefern Sie diesen aus.
  2. Wenn nicht, holen Sie die Anfrage aus dem Netzwerk und öffnen Sie dann auch den Cache, der im ersten Block erstellt wurde, und fügen Sie eine Kopie der Anfrage mit Cache.put hinzu (cache.put(event.request, response.clone())).
  3. Wenn dies fehlschlägt (z. B. weil das Netzwerk ausgefallen ist), geben Sie eine Ersatzantwort zurück.

Geben Sie schließlich zurück, was auch immer die benutzerdefinierte Antwort letztendlich war, indem Sie FetchEvent.respondWith verwenden.

js
self.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/bountyHunters.jpg",
          "/gallery/myLittleVader.jpg",
          "/gallery/snowTroopers.jpg",
        ]),
      ),
  );
});

self.addEventListener("fetch", (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      // caches.match() always resolves
      // but in case of success response will have value
      if (response !== undefined) {
        return response;
      } else {
        return fetch(event.request)
          .then((response) => {
            // response may be used only once
            // we need to save clone to put one copy in cache
            // and serve second one
            let responseClone = response.clone();

            caches.open("v1").then((cache) => {
              cache.put(event.request, responseClone);
            });
            return response;
          })
          .catch(() => caches.match("/gallery/myLittleVader.jpg"));
      }
    }),
  );
});

Dieses Snippet zeigt, wie die API außerhalb eines Service Worker-Kontexts verwendet werden kann und verwendet den await-Operator für einen viel besser lesbaren Code.

js
// Try to get data from the cache, but fall back to fetching it live.
async function getData() {
  const cacheVersion = 1;
  const cacheName = `myapp-${cacheVersion}`;
  const url = "https://jsonplaceholder.typicode.com/todos/1";
  let cachedData = await getCachedData(cacheName, url);

  if (cachedData) {
    console.log("Retrieved cached data");
    return cachedData;
  }

  console.log("Fetching fresh data");

  const cacheStorage = await caches.open(cacheName);
  await cacheStorage.add(url);
  cachedData = await getCachedData(cacheName, url);
  await deleteOldCaches(cacheName);

  return cachedData;
}

// Get data from the cache.
async function getCachedData(cacheName, url) {
  const cacheStorage = await caches.open(cacheName);
  const cachedResponse = await cacheStorage.match(url);

  if (!cachedResponse || !cachedResponse.ok) {
    return false;
  }

  return await cachedResponse.json();
}

// Delete any old caches to respect user's disk space.
async function deleteOldCaches(currentCache) {
  const keys = await caches.keys();

  for (const key of keys) {
    const isOurCache = key.startsWith("myapp-");
    if (currentCache === key || !isOurCache) {
      continue;
    }
    caches.delete(key);
  }
}

try {
  const data = await getData();
  console.log({ data });
} catch (error) {
  console.error({ error });
}

Spezifikationen

Specification
Service Workers
# cachestorage-interface

Browser-Kompatibilität

Siehe auch