Strategien für Service Worker
Cache-first, Network-first und Stale-while-revalidate – die passende Strategie pro Ressourcentyp auswählen
Strategien für Service Worker ist eine kostenlose Vue 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 Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.
Überblick über Caching-Strategien
Ein Service Worker fängt Netzwerkanfragen ab und entscheidet, ob die Antwort aus dem Cache, aus dem Netzwerk oder aus beiden Quellen bereitgestellt wird. Workbox benennt vier grundlegende Strategien, die jeweils für eine andere Art von Ressource geeignet sind.
CacheFirst
CacheFirst liefert die Antwort aus dem Cache und greift nur bei einem Fehltreffer auf das Netzwerk zu. Die Strategie eignet sich am besten für selten geänderte Assets mit Content-Hash, etwa Schriftarten und Bilder.
// serve cached, fall back to network on missNetworkFirst
NetworkFirst versucht zuerst das Netzwerk und verwendet bei fehlender Verbindung oder einer Zeitüberschreitung den Cache. Die Strategie eignet sich am besten für API-Antworten, bei denen Aktualität wichtig ist, die aber auch offline verfügbar sein sollen.
// try network, fall back to cache when offlineStaleWhileRevalidate
StaleWhileRevalidate liefert aus Geschwindigkeitsgründen sofort die zwischengespeicherte Kopie und lädt gleichzeitig im Hintergrund eine aktuelle Kopie, um den Cache zu aktualisieren. Die Strategie eignet sich hervorragend für JS-Bundles und CSS.
// return cache now, update cache in backgroundNetworkOnly und CacheOnly
Die beiden Extreme: NetworkOnly führt immer eine Netzwerkanfrage aus und verwendet keinen Cache, während CacheOnly ausschließlich vorab im Cache gespeicherte Inhalte bereitstellt. Verwenden Sie diese Strategien für nicht cachebare POST-Anfragen oder ausschließlich vorab gecachte Assets.
Das runtimeCaching-Array
In der Workbox-Konfiguration ist runtimeCaching ein Array mit Regeln. Jede Regel gleicht Anfrage-URLs ab und weist eine Strategie sowie einen Cache-Namen zu.
VitePWA({
workbox: {
runtimeCaching: [ /* rules */ ]
}
});Eine urlPattern-Regel
Jede Regel verfügt über ein urlPattern (regulärer Ausdruck oder Funktion), einen handler (den Namen der Strategie) und options, etwa den Cache-Namen.
{
urlPattern: /\/api\//,
handler: "NetworkFirst",
options: { cacheName: "api-cache" }
}Statische Assets mit CacheFirst cachen
Gleichen Sie Bilder und Schriftarten ab und stellen Sie sie mit CacheFirst bereit, da sich ihre URLs mit Content-Hash ändern, wenn sich die Datei ändert.
{
urlPattern: /\.(?:png|jpg|svg|woff2)$/,
handler: "CacheFirst",
options: { cacheName: "static-assets" }
}JS-Bundles mit StaleWhileRevalidate cachen
Stellen Sie Script- und Style-Bundles sofort aus dem Cache bereit und aktualisieren Sie sie gleichzeitig im Hintergrund.
{
urlPattern: /\.(?:js|css)$/,
handler: "StaleWhileRevalidate",
options: { cacheName: "assets" }
}Das Ablauf-Plugin
Ohne Begrenzungen wachsen Caches unbegrenzt. Die Option expiration begrenzt die Anzahl der Einträge und deren maximales Alter und entfernt dabei zuerst die ältesten Einträge.
options: {
cacheName: "api-cache",
expiration: {
maxEntries: 50,
maxAgeSeconds: 60 * 60 * 24
}
}Opaque Responses cachen
Bei ursprungsübergreifenden API-Antworten fügen Sie häufig cacheableResponse mit zulässigen Statuscodes hinzu, damit nur erfolgreiche Antworten gespeichert werden.
options: {
cacheableResponse: { statuses: [0, 200] }
}Kurze Überprüfung
Welche Strategie eignet sich am besten für API-Antworten, die aktuell, aber auch offline verfügbar sein sollen?
Zusammenfassung
Workbox-Strategien entsprechen bestimmten Ressourcentypen: CacheFirst für statische Assets, NetworkFirst für API-Antworten und StaleWhileRevalidate für JS-/CSS-Bundles. Definieren Sie sie im runtimeCaching-Array mit einem urlPattern, einem handler und options, etwa dem expiration-Plugin zur Begrenzung der Cache-Größe.
Lerne HTML mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 42
- Lektionen
- 156
Häufig gestellte Fragen
Ist die Lektion „Strategien für Service Worker“ kostenlos?
Ja — der vollständige Text von „Strategien für Service Worker“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Strategien für Service Worker“?
Cache-first, Network-first und Stale-while-revalidate – die passende Strategie pro Ressourcentyp auswählen Du übst Vue 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 Vue Academy zu starten?
Keine Vorkenntnisse erforderlich. Vue 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 „Strategien für Service Worker“?
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 Vue Academy-Lektion Code schreiben und ausführen?
Ja. Jede Vue 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
- vite-plugin-pwa einrichten
- Strategien für Service Worker
- Offline-Unterstützung und Background Sync
- Push-Benachrichtigungen in Vue-PWAs