Signatur
Beschreibung
Die Methode keys() des CacheStorage-Interfaces (erreichbar über das globale caches) gibt ein Promise zurück. Es wird mit einem Array von Zeichenketten aufgelöst, das die Namen aller benannten Cache-Objekte des aktuellen Ursprungs (Origin) enthält. Die Reihenfolge entspricht der Reihenfolge, in der die Caches angelegt wurden.
Am häufigsten wird keys() im activate-Ereignis eines Service Workers eingesetzt. Dort werden veraltete Cache-Versionen erkannt und mit caches.delete() gelöscht, damit nur der aktuelle Cache (z. B. app-v3) übrig bleibt. Nützlich ist die Methode auch für Debugging- oder Verwaltungsoberflächen, die zeigen, welche Caches es gibt.
Die Methode liefert nur die Namen der Caches, nicht deren Inhalt. Um an die gespeicherten Anfragen zu kommen, öffnet man einen Cache mit caches.open(name) und ruft danach Cache.prototype.keys() auf. Diese Methode gibt Request-Objekte zurück, keine Zeichenketten.
Rückgabewert
[]).Beispiele
Alle Cache-Namen auflisten
const listCaches = async () => {
const names = await caches.keys();
console.log(`Gefundene Caches: ${names.length}`);
names.forEach((name) => console.log('-', name));
};
listCaches();Veraltete Caches im Service Worker löschen
// sw.js
const CURRENT_CACHES = ['app-v3', 'images-v2'];
self.addEventListener('activate', (event) => {
event.waitUntil((async () => {
const names = await caches.keys();
await Promise.all(
names
.filter((name) => !CURRENT_CACHES.includes(name))
.map((name) => {
console.log('Lösche alten Cache:', name);
return caches.delete(name);
})
);
await self.clients.claim();
})());
});Anzahl der Einträge pro Cache ermitteln
const cacheReport = async () => {
const names = await caches.keys();
const report = await Promise.all(
names.map(async (name) => {
const cache = await caches.open(name);
const requests = await cache.keys();
return { name, entries: requests.length };
})
);
console.table(report);
return report;
};
cacheReport();Alle Caches eines Präfixes entfernen (z. B. beim Logout)
const clearUserCaches = async (prefix = 'user-') => {
const names = await caches.keys();
const targets = names.filter((n) => n.startsWith(prefix));
const results = await Promise.all(targets.map((n) => caches.delete(n)));
return results.filter(Boolean).length;
};
clearUserCaches().then((count) => console.log(`${count} Caches gelöscht`));// Wichtig · Fallstricke
- Nur in sicheren Kontexten:
cachesgibt es nur über HTTPS oderlocalhost. In unsicheren Kontexten istwindow.cachesundefined. Vor dem Aufruf sollte man deshalb mit'caches' in selfprüfen, ob die API vorhanden ist. - Verwechslungsgefahr:
CacheStorage.keys()liefert Zeichenketten, also die Cache-Namen.Cache.keys()liefert dagegenRequest-Objekte, also die Einträge in einem einzelnen Cache. - Nur der eigene Ursprung: Die Liste enthält ausschließlich Caches des aktuellen Ursprungs, auch wenn die Methode im Fenster statt im Service Worker aufgerufen wird. Fenster und Service Worker teilen sich denselben
CacheStorage. - Privater Modus: In manchen Browsern, z. B. in älteren Firefox-Versionen im privaten Modus, kann der Aufruf mit einem
SecurityErrorabgelehnt werden. Deshalb sollte man Fehler immer mittry/catchabfangen. - Gleichzeitige Änderungen: Das Array ist eine Momentaufnahme. Caches, die parallel angelegt oder gelöscht werden, sind darin nicht unbedingt berücksichtigt.
- Browser-Unterstützung: Unterstützt in Chrome, Edge, Firefox und Safari (ab 11.1). Die Methode ist sowohl im Fenster- als auch im Worker-Kontext verfügbar.