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 einem anderen Typ von Worker oder einem window-Kontext zugegriffen werden können (Sie sind nicht nur auf die Nutzung mit Service Workern beschränkt).
  • Pflegt eine Zuordnung von String-Namen zu entsprechenden Cache-Objekten.

Verwenden Sie CacheStorage.open(), um eine Instanz von Cache 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 zugreifen über die Window.caches-Eigenschaft in Fenstern oder über die WorkerGlobalScope.caches-Eigenschaft in Workern.

Note: CacheStorage lehnt immer mit einem SecurityError bei nicht vertrauenswürdigen Ursprüngen ab (d.h. solche, die kein HTTPS verwenden, obwohl diese Definition wahrscheinlich in Zukunft komplexer wird). Bei Tests in Firefox können Sie dies vermeiden, indem Sie die Option Enable Service Workers over HTTP (when toolbox is open) im Firefox DevTools-Optionen/Zahnradsymbol aktivieren. Außerdem kann CacheStorage, da es Dateisystemzugriff erfordert, im privaten Modus in Firefox möglicherweise nicht verfügbar sein.

Note: CacheStorage.match() ist eine Komfortmethode. Eine äquivalente Funktionalität zum Abgleichen eines Cache-Eintrags kann implementiert werden, indem ein Array von Cache-Namen von CacheStorage.keys() zurückgegeben wird, jeder Cache mit CacheStorage.open() geöffnet wird und der gewünschte Cache mit Cache.match() abgeglichen wird.

Methoden der Instanz

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 zu diesem Treffer aufgelöst wird.

CacheStorage.has()

Gibt ein Promise zurück, das zu true aufgelöst wird, wenn ein Cache-Objekt, das dem cacheName entspricht, existiert.

CacheStorage.open()

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

CacheStorage.delete()

Findet das Cache-Objekt, das dem cacheName entspricht, und löscht das Cache-Objekt, wenn es gefunden wurde, und gibt ein Promise zurück, das zu true aufgelöst wird. Wenn kein Cache-Objekt gefunden wird, wird es zu false aufgelöst.

CacheStorage.keys()

Gibt ein Promise zurück, das mit einem Array aufgelöst wird, das Strings enthält, die allen benannten Cache-Objekten entsprechen, die vom 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 der App zu handhaben. Dies besteht darin, CacheStorage.open aufzurufen, um einen neuen Cache zu erstellen und dann mit Cache.addAll eine Reihe von Assets hinzuzufügen.

Im zweiten Codeblock warten wir darauf, dass ein FetchEvent ausgelöst wird. Wir konstruieren eine benutzerdefinierte Antwort folgendermaßen:

  1. Überprüfen, ob ein Treffer für die Anfrage im CacheStorage gefunden wird. Wenn ja, wird dieser bereitgestellt.
  2. Wenn nicht, holen Sie die Anfrage aus dem Netzwerk und öffnen Sie erneut 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), wird eine alternative Antwort zurückgegeben.

Zum Schluss geben Sie die benutzerdefinierte Antwort zurück, die letztlich gleich ist, mit FetchEvent.respondWith.

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;
      }
      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 deutlich übersichtlicheren 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