Die Cache API ist eine Browser-API zum programmatischen Speichern von HTTP-Request/Response-Paaren. Während der normale Browser-Cache automatisch arbeitet, gibt die Cache API Entwicklern die volle Kontrolle darüber, welche Antworten wie lange vorgehalten werden. Sie ist das Rückgrat moderner Offline-Webanwendungen und Progressive Web Apps.
Zugriff und Grundbefehle
Die API ist über das globale caches-Objekt erreichbar, sowohl im Fenster- als auch im Worker-Kontext. Mit caches.open('name') öffnet man einen benannten Cache, cache.addAll([...]) lädt und speichert mehrere Anfragen, cache.match(request) sucht eine gespeicherte Antwort. Jeder Cache ist eine eigene, persistent gespeicherte Sammlung von Request/Response-Objekten.
Typische Caching-Strategien
- Cache-first: Antwort direkt aus dem Cache, nur bei Fehlschlag ins Netz — ideal für unveränderliche statische Assets wie CSS und JavaScript.
- Network-first: zuerst Netz, bei Fehler Cache — gut für aktuelle Inhalte wie API-Antworten oder Blog-Posts.
- Stale-while-revalidate: sofort die alte Antwort ausliefern und im Hintergrund aktualisieren — typisch für Profilbilder und Metriken.
Einsatz mit Service Workern
Die Cache API wurde geschaffen, damit Service Worker Netzwerk-Anfragen abfangen und offline beantworten können. Sie überlebt Browser-Neustarts und ist pro Origin (Protokoll + Host + Port) isoliert. Einige Browser räumen ungenutzte Caches nach einiger Zeit automatisch auf, etwa Safari nach einigen Wochen.
Abgrenzung zu anderen Speicher-APIs
localStorage speichert nur einfache Strings, IndexedDB strukturierte Objekte — die Cache API dagegen komplette HTTP-Antworten inklusive Headern. Gemeinsam mit dem OPFS und der File System API deckt sie die wichtigsten Speicherbedürfnisse von Webanwendungen ab.
Verwandte Grundlagen: Single-Page-App, DOM.