JavaScript Academy · Lektion

Die Cache-API

Speichern und liefern Sie Antworten aus dem Cache.

Die Cache-API ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des JavaScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was ist die Cache API?

Die Cache API speichert Anfrage-Antwort-Paare in benannten Caches. Service Worker verwenden sie, um Ressourcen bereitzustellen, ohne das Netzwerk aufzurufen. Sie bildet damit die Grundlage für Offline-Unterstützung.

Das caches-Objekt

Das globale caches-Objekt (ein CacheStorage) verwaltet alle Ihre benannten Caches. Es ist sowohl in Seiten als auch in Service Workern verfügbar.

// Available globally:
// caches.open(name)
// caches.match(request)
// caches.delete(name)
// caches.keys()

Einen Cache öffnen

caches.open(name) gibt ein Promise für einen Cache mit diesem Namen zurück und erstellt ihn, falls er noch nicht existiert. Über Namen können Sie Ihre Caches versionieren.

caches.open('static-v1').then(cache => {
  console.log('cache ready');
});

Vorab-Caching mit addAll

Während install ruft cache.addAll(urls) eine Liste von Ressourcen ab und speichert sie in einem Aufruf. Wenn eine der Abrufoperationen fehlschlägt, wird die gesamte Operation abgelehnt.

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('static-v1').then(cache =>
      cache.addAll(['/', '/styles.css', '/app.js'])
    )
  );
});

waitUntil

event.waitUntil(promise) weist den Browser an, den Worker am Leben zu halten, bis das Promise abgeschlossen ist. Verpacken Sie die Einrichtung des Caches darin, damit die Installation nicht zu früh beendet wird.

self.addEventListener('install', (event) => {
  event.waitUntil(setupCache());
});

Einen Eintrag hinzufügen

cache.put(request, response) speichert eine einzelne Antwort, während cache.add(url) eine URL abruft und speichert. Verwenden Sie put, wenn Sie bereits eine zu speichernde Antwort haben.

const cache = await caches.open('static-v1');
const response = await fetch('/logo.png');
await cache.put('/logo.png', response);

Im Cache suchen

cache.match(request) sucht nach einer gespeicherten Antwort. Das Promise wird mit der Antwort erfüllt oder mit undefined, wenn keine Übereinstimmung gefunden wird.

const cache = await caches.open('static-v1');
const hit = await cache.match('/styles.css');
if (hit) console.log('served from cache');

Kurzform caches.match

caches.match(request) durchsucht alle Caches gleichzeitig. Das ist praktisch in einem fetch-Handler, wenn es keine Rolle spielt, in welchem Cache sich die Ressource befindet.

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then(hit =>
      hit || fetch(event.request)
    )
  );
});

respondWith

Innerhalb eines fetch-Ereignisses stellt event.respondWith(promise) die Antwort bereit, die der Browser verwendet. Erfüllen Sie das Promise mit einer Antwort aus dem Cache oder einer frisch abgerufenen Response.

self.addEventListener('fetch', (event) => {
  event.respondWith(handleRequest(event.request));
});

Antworten klonen

Der Inhalt einer Antwort kann nur einmal gelesen werden. Wenn Sie eine Antwort sowohl zurückgeben als auch speichern möchten, klonen Sie sie zuerst.

const response = await fetch(request);
cache.put(request, response.clone()); // store a copy
return response; // return the original

Cache-Einträge löschen

cache.delete(request) entfernt einen einzelnen Eintrag; caches.delete(name) löscht einen gesamten benannten Cache. Verwenden Sie diese Methoden, um veraltete Ressourcen zu entfernen.

await cache.delete('/old-asset.js');
await caches.delete('static-v0'); // remove old cache version

Kurze Überprüfung

Testen Sie Ihr Verständnis der Cache API.

Rückblick

Sie haben die Cache API kennengelernt:

caches.open(name) ruft einen benannten Cache ab oder erstellt ihn.
addAll speichert Ressourcen vorab im Cache; put/add speichern Einträge.
match ruft Einträge ab; caches.match durchsucht alle Caches.
respondWith stellt die Antwort im fetch-Ereignis bereit.
Klonen Sie Antworten, bevor Sie sie cachen und zurückgeben.

Als Nächstes folgen Caching-Strategien.

Häufig gestellte Fragen

Ist die Lektion „Die Cache-API“ kostenlos?

Ja — der vollständige Text von „Die Cache-API“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des JavaScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Die Cache-API“?

Speichern und liefern Sie Antworten aus dem Cache. Du übst JavaScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um JavaScript Academy zu starten?

Keine Vorkenntnisse erforderlich. JavaScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „Die Cache-API“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser JavaScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede JavaScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu JavaScript Academy