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, auf das von einem ServiceWorker oder anderen Arbeitern oder dem window-Bereich zugegriffen werden kann (Sie sind nicht darauf beschränkt, es nur mit Service Workern zu verwenden).
  • Verwaltet eine Zuordnung von Zeichenkettennamen zu den entsprechenden Cache-Objekten.

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

Verwenden Sie CacheStorage.match(), um zu prüfen, ob eine gegebene Request ein Schlüssel in einem der von dem CacheStorage-Objekt verfolgten Cache-Objekte ist.

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

Note: CacheStorage lehnt immer mit einem SecurityError bei unzuverlässigen Ursprüngen ab (z.B. solchen, die nicht HTTPS verwenden, obwohl diese Definition in Zukunft wahrscheinlich komplexer werden wird). Beim Testen in Firefox können Sie dies umgehen, indem Sie die Option Service Workers über HTTP aktivieren (wenn das Tool-Fenster geöffnet ist) im Optionen-/Zahnrad-Menü der Firefox-Entwicklertools aktivieren. Darüber hinaus kann CacheStorage aufgrund der erforderlichen Dateisystemzugriffe im privaten Modus in Firefox nicht verfügbar sein.

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

Instanzmethoden

CacheStorage.match()

Prüft, ob eine gegebene Request ein Schlüssel in einem der von dem CacheStorage-Objekt verfolgten Cache-Objekte ist, und gibt ein Promise zurück, das mit diesem Treffer auflöst.

CacheStorage.has()

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

CacheStorage.open()

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

CacheStorage.delete()

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

CacheStorage.keys()

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

Beispiele

Dieses Code-Snippet stammt aus dem MDN einfaches Service Worker Beispiel (siehe einfacher Service Worker live betrieben.) 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 zu verwalten. 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 darauf, dass ein FetchEvent ausgelöst wird. Wir konstruieren eine benutzerdefinierte Antwort wie folgt:

  1. Prüfen, ob ein Treffer für die Anfrage im CacheStorage gefunden wird. Falls ja, diesen bereitstellen.
  2. Falls nicht, die Anfrage aus dem Netzwerk abrufen, dann auch den Cache öffnen, der im ersten Block erstellt wurde, und ein Duplikat der Anfrage hinzufügen, indem Cache.put verwendet wird (cache.put(event.request, response.clone())).
  3. Falls dies fehlschlägt (z.B. weil das Netzwerk ausgefallen ist), eine Ersatzantwort zurückgeben.

Schließlich zurückgeben, was auch immer die benutzerdefinierte Antwort zu sein scheint, unter Verwendung von 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;
      } 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-Kontextes verwendet werden kann und verwendet den await-Operator, um den Code wesentlich lesbarer zu gestalten.

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

BCD tables only load in the browser

Siehe auch