Registrierung und Lebenszyklus von Service Workern
Registrieren Sie ein Service-Worker-Skript, verstehen Sie die Lifecycle-Ereignisse install, activate und fetch und verwenden Sie skipWaiting und clients.claim.
Registrierung und Lebenszyklus von Service Workern ist eine kostenlose Frontend 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 Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was ist ein Service Worker?
Ein Service Worker ist eine JavaScript-Datei, die in einem separaten Browser-Worker (nicht im Hauptthread) ausgeführt wird und Netzwerkanfragen für Ihre Origin abfängt. Er bildet die Grundlage für Offline-PWAs, Push-Benachrichtigungen und die Hintergrundsynchronisierung.
Einen Service Worker registrieren
Registrieren Sie ihn in Ihrem Hauptskript. Service Worker erfordern HTTPS (außer auf localhost).
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js', { scope: '/' })
.then(reg => console.log('SW registered:', reg.scope))
.catch(err => console.error('SW registration failed:', err));
});
}Gültigkeitsbereich
Ein Service Worker steuert Anfragen innerhalb seines Gültigkeitsbereichs (des Verzeichnisses, aus dem er bereitgestellt wird). /sw.js im Stammverzeichnis steuert alles. Ein SW unter /app/sw.js steuert nur /app/*.
Lebenszyklus: install → activate → fetch
Drei zentrale Ereignisse: install (einmalig, richtet Caches ein), activate (einmalig, entfernt alte Caches), fetch (bei jeder Anfrage – entscheidet zwischen Cache und Netzwerk).
// sw.js
self.addEventListener('install', (event) => {
console.log('SW installing');
event.waitUntil(
caches.open('v1').then(cache =>
cache.addAll(['/', '/index.html', '/styles.css', '/app.js'])
)
);
});
self.addEventListener('activate', (event) => {
console.log('SW active');
event.waitUntil(
caches.keys().then(keys =>
Promise.all(keys.filter(k => k !== 'v1').map(k => caches.delete(k)))
)
);
});
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then(res => res || fetch(event.request))
);
});skipWaiting()
Standardmäßig wartet ein aktualisierter SW, bis alle Tabs geschlossen sind, bevor er aktiviert wird. self.skipWaiting() im install-Handler erzwingt die sofortige Aktivierung – Updates werden schneller bereitgestellt, aber alte und neue Assets können sich vermischen.
self.addEventListener('install', (event) => {
self.skipWaiting(); // activate immediately on next reload
// ... cache setup
});clients.claim()
Nach der Aktivierung steuert ein neuer SW keine Seiten, die zuvor geladen wurden. self.clients.claim() im activate-Handler übernimmt sofort die Kontrolle.
self.addEventListener('activate', (event) => {
event.waitUntil(self.clients.claim());
});Den Service Worker aktualisieren
Browser prüfen bei jeder Navigation auf eine neue sw.js (maximales Alter: 24 Stunden). Wenn sich der Dateiinhalt geändert hat (Byte für Byte unterschiedlich), wird sie als neuer SW installiert und wartet auf die Aktivierung. Laden Sie die Seite neu, um die Aktivierung auszulösen.
Updates in der App erkennen
Hören Sie auf updatefound, um eine Update-Aufforderung anzuzeigen.
navigator.serviceWorker.register('/sw.js').then(reg => {
reg.addEventListener('updatefound', () => {
const newSW = reg.installing;
newSW.addEventListener('statechange', () => {
if (newSW.state === 'installed' && navigator.serviceWorker.controller) {
// New version ready
showUpdateBanner(() => {
newSW.postMessage('SKIP_WAITING');
window.location.reload();
});
}
});
});
});Registrierung aufheben
Um einen außer Kontrolle geratenen Service Worker zu stoppen (wenn bei der Entwicklung etwas schiefgelaufen ist), heben Sie seine Registrierung auf.
navigator.serviceWorker.getRegistrations().then(regs => {
for (const reg of regs) reg.unregister();
});Browser-DevTools
Chrome DevTools → Application → Service Workers zeigt registrierte SWs an und ermöglicht es Ihnen, ihre Registrierung aufzuheben, „Update on reload“ zu simulieren und die Ereignisse des Lebenszyklus schrittweise zu durchlaufen.
Häufige Stolperfallen
1) Die SW-Datei muss im Stammverzeichnis oder in einem übergeordneten Verzeichnis liegen. 2) HTTPS ist erforderlich. 3) Änderungen am SW erfordern während der Entwicklung ein Hard Reload. 4) Cachen Sie einmalig und aktualisieren Sie über Versionierung, statt den Cache endlos wachsen zu lassen. 5) Cachen Sie keine POST-Anfragen (sie werden nicht unterstützt).
Workbox – die Produktivitätsbibliothek
Googles Workbox abstrahiert den Lebenszyklus und stellt fertige Caching-Strategien bereit. Die meisten PWAs im Produktiveinsatz verwenden Workbox statt selbst geschriebenem SW-Code.
Schnelltest
Was bewirkt self.skipWaiting() im install-Handler eines Service Workers?
Rückblick: Lebenszyklus des Service Workers
JavaScript-Worker, der Netzwerkanfragen für Ihre Origin abfängt. Registrierung über navigator.serviceWorker.register. Lebenszyklus: install (Caches einrichten), activate (aufräumen), fetch (Anfragen abfangen). skipWaiting + clients.claim für sofortige Updates. Hören Sie auf updatefound, um Nutzer zu einem Update aufzufordern. Workbox abstrahiert den Boilerplate-Code. HTTPS ist erforderlich (außer auf localhost).
Häufig gestellte Fragen
Ist die Lektion „Registrierung und Lebenszyklus von Service Workern“ kostenlos?
Ja — der vollständige Text von „Registrierung und Lebenszyklus von Service Workern“ 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 „Registrierung und Lebenszyklus von Service Workern“?
Registrieren Sie ein Service-Worker-Skript, verstehen Sie die Lifecycle-Ereignisse install, activate und fetch und verwenden Sie skipWaiting und clients.claim. 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 2 von 4.
Wie lange dauert die Lektion „Registrierung und Lebenszyklus von Service Workern“?
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