Offline-Caching-Strategien: CacheFirst und NetworkFirst
Implementieren Sie Cache-First für statische Assets und Network-First für API-Antworten mithilfe der Cache API und der Workbox-Bibliothek.
Offline-Caching-Strategien: CacheFirst und NetworkFirst ist eine kostenlose Frontend 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 Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Warum Caching-Strategien wichtig sind
Service Worker können jeden Fetch abfangen – dafür benötigen Sie jedoch eine Strategie. Unterschiedliche Inhalte benötigen unterschiedliche Regeln: Ein Logo sollte dauerhaft gecacht werden, eine API-Antwort sollte immer aktuell sein, und News-Artikel profitieren von Stale-While-Revalidate.
Die Cache API
Service Worker verwenden die Cache API: einen Schlüssel-Wert-Speicher aus Request- → Response-Paaren, der pro Origin abgegrenzt ist. Die Daten bleiben über Sitzungen hinweg erhalten.
// open a cache:
const cache = await caches.open('v1');
// add resources:
await cache.add('/styles.css');
await cache.addAll(['/', '/app.js', '/styles.css']);
// look up:
const response = await cache.match('/styles.css');
// delete:
await cache.delete('/styles.css');Cache First
Prüfen Sie zuerst den Cache. Wenn der Eintrag vorhanden ist, geben Sie ihn zurück. Falls nicht, greifen Sie auf das Netzwerk zurück und cachen Sie die Antwort. Ideal für: statische Assets, Fonts, Logos, App-Shell.
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then(cached => {
if (cached) return cached;
return fetch(event.request).then(res => {
const clone = res.clone();
caches.open('v1').then(c => c.put(event.request, clone));
return res;
});
})
);
});Network First
Versuchen Sie zuerst das Netzwerk. Wenn dies fehlschlägt (offline), greifen Sie auf den Cache zurück. Ideal für: API-Aufrufe und dynamische Inhalte, bei denen Aktualität wichtiger ist als Geschwindigkeit.
self.addEventListener('fetch', (event) => {
event.respondWith(
fetch(event.request).then(res => {
const clone = res.clone();
caches.open('api-v1').then(c => c.put(event.request, clone));
return res;
}).catch(() => caches.match(event.request))
);
});Stale While Revalidate
Geben Sie den Cache sofort zurück (schnell), rufen Sie die Daten anschließend im Hintergrund ab und aktualisieren Sie den Cache für das nächste Mal. Ideal für: Avatare, News-Artikel und teilweise aktuelle Daten.
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then(cached => {
const network = fetch(event.request).then(res => {
caches.open('v1').then(c => c.put(event.request, res.clone()));
return res;
});
return cached || network;
})
);
});Network Only
Umgehen Sie den Cache vollständig – greifen Sie immer auf das Netzwerk zu. Verwenden Sie dies für nicht cachebare Anfragen (Auth-Endpunkte, Analytics, Mutationen).
self.addEventListener('fetch', (event) => {
if (event.request.url.includes('/api/auth')) {
event.respondWith(fetch(event.request));
return;
}
// ... other strategies
});Cache Only
Greifen Sie niemals auf das Netzwerk zu – geben Sie den Cache zurück oder schlagen Sie fehl. Nützlich für Dateien, die Sie vorab cachen und während einer Sitzung niemals aktualisieren möchten.
Workbox-Strategien
Workbox bündelt alle Strategien als benannte Klassen. Dadurch ist weniger Boilerplate erforderlich.
import { registerRoute } from 'workbox-routing';
import { CacheFirst, NetworkFirst, StaleWhileRevalidate } from 'workbox-strategies';
registerRoute(({ request }) => request.destination === 'image',
new CacheFirst({ cacheName: 'images' })
);
registerRoute(({ url }) => url.pathname.startsWith('/api/'),
new NetworkFirst({ cacheName: 'api', networkTimeoutSeconds: 3 })
);
registerRoute(({ request }) => request.destination === 'document',
new StaleWhileRevalidate({ cacheName: 'pages' })
);Cache-Ablauf
Caches wachsen unbegrenzt, wenn Sie keine Limits festlegen. Workbox stellt dafür ExpirationPlugin bereit.
import { ExpirationPlugin } from 'workbox-expiration';
new CacheFirst({
cacheName: 'images',
plugins: [new ExpirationPlugin({
maxEntries: 50,
maxAgeSeconds: 30 * 24 * 60 * 60 // 30 days
})]
});Cachebare Antworten
Standardmäßig cachen Browser nur Antworten mit dem Status 200. Überspringen Sie 4xx-, 5xx- und opaque-Antworten (Cross-Origin mit no-cors), damit der Cache nicht mit Fehlern gefüllt wird.
Offline-Fallback-Seite
Zeigen Sie eine verständliche Offline-Seite an, wenn eine Navigation fehlschlägt – das sorgt für eine bessere UX als die standardmäßige Fehlermeldung des Browsers.
self.addEventListener('install', (e) => {
e.waitUntil(caches.open('offline').then(c => c.add('/offline.html')));
});
self.addEventListener('fetch', (e) => {
if (e.request.mode === 'navigate') {
e.respondWith(
fetch(e.request).catch(() => caches.match('/offline.html'))
);
}
});Die richtige Strategie wählen
Statische Assets (Logo, Font, CSS): Cache First. API-Daten (Nutzerprofil, Feed): Network First. Inhalte, die gelegentlich aktuell sein müssen (Avatare, News): Stale While Revalidate. Authentifizierung: Network Only. Vorinstallierte statische Dateien: Cache Only.
Schnelltest
Welche Caching-Strategie eignet sich am besten für eine CSS-Datei, die sich selten ändert, aber schnell geladen werden muss?
Rückblick: Caching-Strategien
Cache First: statische Assets (am schnellsten, möglicherweise veraltet). Network First: API-Daten (am aktuellsten, langsamer). Stale While Revalidate: Cache ausliefern + im Hintergrund abrufen. Network Only: Authentifizierung und Mutationen. Cache Only: vorinstallierte App-Shell. Verwenden Sie Workbox für weniger Boilerplate. Legen Sie Ablauf-Limits fest. Fügen Sie eine Offline-Fallback-Seite hinzu. Wählen Sie die Strategie passend zum Ressourcentyp.
Häufig gestellte Fragen
Ist die Lektion „Offline-Caching-Strategien: CacheFirst und NetworkFirst“ kostenlos?
Ja — der vollständige Text von „Offline-Caching-Strategien: CacheFirst und NetworkFirst“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Offline-Caching-Strategien: CacheFirst und NetworkFirst“?
Implementieren Sie Cache-First für statische Assets und Network-First für API-Antworten mithilfe der Cache API und der Workbox-Bibliothek. Du übst Frontend 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 Frontend Academy zu starten?
Keine Vorkenntnisse erforderlich. Frontend 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 „Offline-Caching-Strategien: CacheFirst und NetworkFirst“?
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 Frontend Academy-Lektion Code schreiben und ausführen?
Ja. Jede Frontend 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
- Das Web-App-Manifest
- Registrierung und Lebenszyklus von Service Workern
- Offline-Caching-Strategien: CacheFirst und NetworkFirst
- Push-Benachrichtigungen