Caching-Strategien Übersicht

Service Worker bieten fünf grundlegende Caching-Strategien für unterschiedliche Anwendungsfälle:

Cache First (Cache Falling Back to Network)

Funktionsweise

1. Cache prüfen
2. Bei Cache-Hit: Gecachte Response zurückgeben
3. Bei Cache-Miss: Netzwerk-Request, Response cachen

Implementierung

// Vanilla JavaScript
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request)
      .then(cachedResponse => {
        if (cachedResponse) {
          return cachedResponse;
        }
        return fetch(event.request)
          .then(response => {
            const clone = response.clone();
            caches.open('static-cache')
              .then(cache => cache.put(event.request, clone));
            return response;
          });
      })
  );
});

// Mit Workbox
import { CacheFirst } from 'workbox-strategies';
import { registerRoute } from 'workbox-routing';

registerRoute(
  ({ request }) => request.destination === 'image',
  new CacheFirst({ cacheName: 'images' })
);

Anwendungsfälle

• Statische Assets (JS, CSS)
• Fonts
• Bilder und Icons
• Versionierte Ressourcen (bundle.a1b2c3.js)

Vorteile

• Schnellste Ladezeit
• Offline-fähig nach erstem Laden
• Minimale Netzwerknutzung

Nachteile

• Veraltete Inhalte möglich
• Updates erfordern Cache-Invalidierung

Network First (Network Falling Back to Cache)

Funktionsweise

1. Netzwerk-Request versuchen
2. Bei Erfolg: Response cachen und zurückgeben
3. Bei Fehler: Gecachte Response als Fallback

Implementierung

// Vanilla JavaScript
self.addEventListener('fetch', (event) => {
  event.respondWith(
    fetch(event.request)
      .then(response => {
        const clone = response.clone();
        caches.open('api-cache')
          .then(cache => cache.put(event.request, clone));
        return response;
      })
      .catch(() => caches.match(event.request))
  );
});

// Mit Workbox
import { NetworkFirst } from 'workbox-strategies';

registerRoute(
  ({ url }) => url.pathname.startsWith('/api/'),
  new NetworkFirst({
    cacheName: 'api-cache',
    networkTimeoutSeconds: 3,
  })
);

Anwendungsfälle

• API-Endpoints mit aktuellen Daten
• Bestandsinformationen
• Preisdaten
• Nutzerspezifische Inhalte

Vorteile

• Immer aktuelle Daten (wenn online)
• Offline-Fallback verfügbar
• Gute Balance zwischen Aktualität und Verfügbarkeit

Nachteile

• Langsamere Initialantwort
• Netzwerk-Abhängigkeit

Stale-While-Revalidate

Funktionsweise

1. Sofort gecachte Response zurückgeben (falls vorhanden)
2. Parallel: Netzwerk-Request im Hintergrund
3. Cache mit neuer Response aktualisieren

Implementierung

// Vanilla JavaScript
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.open('swr-cache').then(cache => {
      return cache.match(event.request).then(cachedResponse => {
        const fetchPromise = fetch(event.request).then(networkResponse => {
          cache.put(event.request, networkResponse.clone());
          return networkResponse;
        });
        return cachedResponse || fetchPromise;
      });
    })
  );
});

// Mit Workbox
import { StaleWhileRevalidate } from 'workbox-strategies';

registerRoute(
  ({ url }) => url.pathname.startsWith('/api/config'),
  new StaleWhileRevalidate({
    cacheName: 'config-cache',
  })
);

Anwendungsfälle

• Konfigurationsdaten
• Feature-Flags
• Benutzerprofile
• Inhalte mit moderater Aktualitätsanforderung

Vorteile

• Sofortige Antwort
• Hintergrund-Aktualisierung
• Gute User Experience

Nachteile

• Erste Antwort möglicherweise veraltet
• Ständige Netzwerk-Requests

Best Practices

1. Cache-Versionierung

const CACHE_VERSION = 'v2';
const CACHE_NAMES = {
  static: `static-${CACHE_VERSION}`,
  api: `api-${CACHE_VERSION}`,
  images: `images-${CACHE_VERSION}`,
};

// Alte Caches beim Aktivieren löschen
self.addEventListener('activate', (event) => {
  event.waitUntil(
    caches.keys().then(keys => {
      return Promise.all(
        keys
          .filter(key => !Object.values(CACHE_NAMES).includes(key))
          .map(key => caches.delete(key))
      );
    })
  );
});

2. Cache-Größe begrenzen

// Mit Workbox ExpirationPlugin
import { ExpirationPlugin } from 'workbox-expiration';

new CacheFirst({
  cacheName: 'images',
  plugins: [
    new ExpirationPlugin({
      maxEntries: 50,
      maxAgeSeconds: 30 * 24 * 60 * 60, // 30 Tage
    }),
  ],
});

3. Nur erfolgreiche Responses cachen

import { CacheableResponsePlugin } from 'workbox-cacheable-response';

new NetworkFirst({
  cacheName: 'api',
  plugins: [
    new CacheableResponsePlugin({
      statuses: [0, 200],
    }),
  ],
});

4. Cache-Key-Normalisierung

// Query-Parameter ignorieren
registerRoute(
  ({ url }) => url.pathname.startsWith('/api/public'),
  new CacheFirst({
    cacheName: 'public-api',
    plugins: [{
      cacheKeyWillBeUsed: async ({ request }) => {
        const url = new URL(request.url);
        url.search = ''; // Query-Parameter entfernen
        return url.href;
      },
    }],
  })
);

Häufige Fehler vermeiden

Strategie-Auswahl-Matrix

Workbox Strategien

Verwandte Themen

• Cache API
• Workbox
• HTTP-Caching (Cache-Control)
• CDN-Caching
• IndexedDB

CFTools Software implementiert optimale Caching-Strategien für maximale Web-Performance.