Window.caches — Eigenschaft · JavaScript-Referenz

Signatur

Window.caches

Beschreibung

Die schreibgeschützte Eigenschaft window.caches liefert das CacheStorage-Objekt des aktuellen Ursprungs (Origin). Darüber öffnest, durchsuchst und löschst du benannte Cache-Objekte, die HTTP-Anfragen (Request) und die zugehörigen Antworten (Response) dauerhaft speichern.

Meist nutzt man die Cache-API in einem Service Worker (dort als self.caches), um Offline-Fähigkeit und schnelle Ladezeiten umzusetzen. Über window.caches kommt die Seite selbst an dieselben Caches heran, z. B. um Inhalte für die Offline-Nutzung vorab zu laden, den Cache-Inhalt anzuzeigen oder Caches beim Abmelden zu löschen.

Alle Methoden von CacheStorage (open(), match(), has(), keys(), delete()) geben Promises zurück und lassen sich deshalb gut mit async/await verwenden. Die Caches werden nie automatisch aktualisiert – Versionierung und Aufräumen übernimmt deine Anwendung.

Rückgabewert

Typ

CacheStorage

Beschreibung

Das CacheStorage-Objekt des aktuellen Ursprungs. In unsicheren Kontexten (HTTP) ist die Eigenschaft nicht vorhanden (undefined).

Beispiele

Verfügbarkeit prüfen und Cache öffnen

if ('caches' in window) {
  const cache = await caches.open('app-v1');
  await cache.addAll(['/', '/styles.css', '/app.js']);
  console.log('Dateien für Offline-Nutzung gespeichert');
} else {
  console.warn('Cache-API nicht verfügbar (kein HTTPS?)');
}

Dateien für Offline-Nutzung gespeichert

Antwort aus dem Cache holen, sonst aus dem Netz

const cachedFetch = async (url) => {
  const cached = await caches.match(url);
  if (cached) return cached;

  const response = await fetch(url);
  if (response.ok) {
    const cache = await caches.open('api-v1');
    // Response kann nur einmal gelesen werden -> Kopie ablegen
    await cache.put(url, response.clone());
  }
  return response;
};

const data = await (await cachedFetch('/api/artikel')).json();
console.log(data.length);

12

Alte Cache-Versionen löschen

const AKTUELL = ['app-v2', 'api-v1'];

const namen = await caches.keys();
const geloescht = await Promise.all(
  namen
    .filter((name) => !AKTUELL.includes(name))
    .map((name) => caches.delete(name))
);
console.log(`${geloescht.length} alte Caches entfernt`);

1 alte Caches entfernt

// Wichtig · Fallstricke

Nur sichere Kontexte: caches gibt es nur unter HTTPS bzw. localhost. Unter HTTP ist die Eigenschaft nicht definiert – prüfe deshalb vorher mit 'caches' in window.
Privatmodus und Speicherlimits: In manchen Browsern (z. B. im privaten Modus älterer Firefox-Versionen) wirft caches.open() einen SecurityError. Außerdem kann der Browser Caches bei Speichermangel löschen, wenn du nicht über navigator.storage.persist() dauerhaften Speicher anforderst.
Keine automatische Ablaufzeit: HTTP-Header wie Cache-Control werden nicht berücksichtigt. Veraltete Einträge musst du selbst entfernen, üblich ist eine Versionierung über den Cache-Namen.
Response-Body nur einmal lesbar: Vor cache.put() immer response.clone() verwenden, wenn die Antwort anschließend noch gelesen werden soll.
Die Caches gelten pro Ursprung. Seite und Service Worker teilen sich also dieselben Daten, fremde Ursprünge können nicht darauf zugreifen.

Siehe auch

Cache TextTrack.id Window.closed Window.frames Window.name