JavaScript Academy · Lektion

Caching-Strategien

Wenden Sie Cache-First- und Network-First-Muster an.

Caching-Strategien ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 3 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.

Warum Strategien wichtig sind

Verschiedene Ressourcen erfordern eine unterschiedliche Behandlung. Ein Logo kann dauerhaft aus dem Cache bereitgestellt werden, während ein API-Feed aktuell sein muss. Eine Caching-Strategie legt fest, ob zuerst der Cache oder das Netzwerk verwendet wird und wie beide kombiniert werden.

Cache-First

Cache-First: Prüfen Sie den Cache. Wenn der Eintrag gefunden wird, geben Sie ihn zurück. Andernfalls rufen Sie ihn aus dem Netzwerk ab. Diese Strategie eignet sich ideal für statische, selten geänderte Ressourcen wie Schriftarten, CSS und Bilder.

async function cacheFirst(request) {
  const cached = await caches.match(request);
  return cached || fetch(request);
}

Cache-First mit Fallback-Caching

Bei einem Cache-Fehltreffer können Sie die Ressource aus dem Netzwerk abrufen und das Ergebnis gleichzeitig speichern, sodass die nächste Anfrage schnell beantwortet wird. Dadurch wird der Cache beim Navigieren der Benutzer schrittweise gefüllt.

async function cacheFirst(request) {
  const cached = await caches.match(request);
  if (cached) return cached;
  const fresh = await fetch(request);
  const cache = await caches.open('runtime');
  cache.put(request, fresh.clone());
  return fresh;
}

Network-First

Network-First: Versuchen Sie zunächst das Netzwerk. Wenn die Anfrage erfolgreich ist, verwenden und speichern Sie das Ergebnis. Wenn sie fehlschlägt (etwa weil das Gerät offline ist), greifen Sie auf den Cache zurück. Diese Strategie eignet sich am besten für häufig aktualisierte Inhalte wie Nachrichten oder Dashboards.

async function networkFirst(request) {
  try {
    const fresh = await fetch(request);
    const cache = await caches.open('runtime');
    cache.put(request, fresh.clone());
    return fresh;
  } catch (err) {
    return caches.match(request);
  }
}

Stale-While-Revalidate

Stale-while-revalidate: Geben Sie die zwischengespeicherte Kopie sofort zurück, um eine schnelle Antwort zu liefern, und rufen Sie gleichzeitig im Hintergrund eine aktuelle Kopie ab, um den Cache für das nächste Mal zu aktualisieren. So erhalten Sie eine gute Balance zwischen Geschwindigkeit und Aktualität.

async function staleWhileRevalidate(request) {
  const cache = await caches.open('runtime');
  const cached = await cache.match(request);
  const network = fetch(request).then(res => {
    cache.put(request, res.clone());
    return res;
  });
  return cached || network;
}

Network-Only und Cache-Only

Zwei einfache Extreme:

Network-only: immer abrufen, niemals zwischenspeichern (z. B. Analytics-Beacons).
Cache-only: nur vorab zwischengespeicherte Assets bereitstellen, niemals auf das Netzwerk zugreifen (z. B. eine App-Shell).

// network-only:
// return fetch(request);
// cache-only:
// return caches.match(request);

Routing nach Anfragetyp

Echte Anwendungen wählen für jede Anfrage eine Strategie. Prüfen Sie im Fetch-Handler request.url oder request.destination und leiten Sie die Anfrage entsprechend weiter.

self.addEventListener('fetch', (event) => {
  const url = new URL(event.request.url);
  if (url.pathname.startsWith('/api/')) {
    event.respondWith(networkFirst(event.request));
  } else {
    event.respondWith(cacheFirst(event.request));
  }
});

Offline-Fallbacks behandeln

Wenn weder das Netzwerk noch der Cache einen Treffer liefern, geben Sie statt einer fehlerhaften Antwort eine benutzerfreundliche Offline-Seite oder einen Platzhalter zurück.

async function withOfflineFallback(request) {
  return (await caches.match(request)) ||
         (await caches.match('/offline.html'));
}

Nur erfolgreiche Antworten zwischenspeichern

Vermeiden Sie das Zwischenspeichern von Fehlern. Prüfen Sie response.ok (oder den Status), bevor Sie eine Antwort speichern, damit ein 404- oder 500-Fehler Ihren Cache nicht verunreinigt.

const fresh = await fetch(request);
if (fresh.ok) {
  cache.put(request, fresh.clone());
}
return fresh;

Eine Strategie auswählen

Passen Sie die Strategie an den Inhalt an:

Statische Assets: Cache-first
Dynamische Daten: Network-first
Gemischte Inhalte: Stale-while-revalidate

Die meisten Anwendungen kombinieren mehrere Strategien mithilfe eines Routings nach Anfrage.

Zusammenfassung der Strategien

Mit Caching-Strategien kann ein einzelner Service Worker die gesamte Anwendung intelligent bedienen: statische Assets sofort, dynamische Daten aktuell und Offline-Fallbacks auf robuste Weise – jeweils passend zur Anfrage.

Kurzer Test

Testen Sie Ihr Verständnis der Caching-Strategien.

Zusammenfassung

Sie haben Caching-Strategien kennengelernt:

Cache-first für statische Assets.
Network-first für aktuelle dynamische Daten.
Stale-while-revalidate für Geschwindigkeit und Aktualität.
Leiten Sie Anfragen über request.url/destination weiter.
Speichern Sie nur erfolgreiche Antworten und stellen Sie Offline-Fallbacks bereit.

Als Nächstes geht es um Background Sync und Cache-Aktualisierungen.

Häufig gestellte Fragen

Ist die Lektion „Caching-Strategien“ kostenlos?

Ja — der vollständige Text von „Caching-Strategien“ 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 „Caching-Strategien“?

Wenden Sie Cache-First- und Network-First-Muster an. 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 3 von 4.

Wie lange dauert die Lektion „Caching-Strategien“?

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