JavaScript Academy · Lektion

Einen Service Worker registrieren

Installieren und aktivieren Sie einen Service Worker.

Einen Service Worker registrieren ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 1 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.

Was ist ein Service Worker?

Ein Service Worker ist ein Skript, das der Browser unabhängig von der Seite im Hintergrund ausführt. Er fungiert als programmierbarer Netzwerk-Proxy: Er kann Anfragen abfangen, Antworten aus dem Cache bereitstellen und Offline-Erlebnisse ermöglichen.

Feature-Erkennung

Nicht jede Umgebung unterstützt Service Worker. Prüfen Sie vor der Registrierung, ob navigator.serviceWorker vorhanden ist, damit ältere Browser ordnungsgemäß mit eingeschränkter Funktionalität weiterarbeiten können.

if ('serviceWorker' in navigator) {
  // safe to register
}

Registrieren

Registrieren Sie einen Service Worker, indem Sie seine Skript-URL an navigator.serviceWorker.register übergeben. Die Methode gibt ein Promise zurück, das mit dem Registrierungsobjekt erfüllt wird.

navigator.serviceWorker.register('/sw.js')
  .then(reg => console.log('registered, scope:', reg.scope))
  .catch(err => console.log('registration failed:', err));

Registrierungs-Scope

Der Scope ist die Menge der URLs, die der Worker kontrolliert. Standardmäßig ist es das Verzeichnis, in dem das Skript liegt. Ein Worker unter /sw.js kontrolliert die gesamte Website; einer unter /app/sw.js kontrolliert nur /app/.

navigator.serviceWorker.register('/app/sw.js');
// Controls pages under /app/ only.

Einen expliziten Scope festlegen

Sie können den Scope mit einer Option einschränken, ihn aber nicht über das Skriptverzeichnis hinaus erweitern, sofern auf dem Server kein spezieller Header gesetzt ist.

navigator.serviceWorker.register('/sw.js', {
  scope: '/dashboard/'
});

HTTPS-Anforderung

Service Worker erfordern einen sicheren Kontext: In der Produktion ist HTTPS erforderlich. localhost gilt für die Entwicklung als sicher. Dadurch wird verhindert, dass Angreifer den Netzwerk-Proxy übernehmen.

Das install-Ereignis

Bei der ersten Registrierung eines Workers wird sein install-Ereignis ausgeführt. Üblicherweise speichern Sie hier wichtige Ressourcen vorab im Cache, damit die Anwendung offline funktioniert.

// sw.js
self.addEventListener('install', (event) => {
  console.log('service worker installing');
});

Das activate-Ereignis

Nach der Installation löst der Worker activate aus. Hier entfernen Sie üblicherweise alte Caches vorheriger Versionen, bevor der Worker beginnt, Seiten zu kontrollieren.

// sw.js
self.addEventListener('activate', (event) => {
  console.log('service worker activated');
});

Der Lebenszyklus

Ein Service Worker durchläuft mehrere Zustände:

installing — der Installations-Handler wird ausgeführt
installed/waiting — bereit und wartet auf die Übernahme
activating / activated — kontrolliert nun Seiten

Standardmäßig wartet ein neuer Worker mit der Aktivierung, bis alte Seiten geschlossen wurden.

Anfragen abfangen

Sobald der Worker aktiv ist, empfängt er über das fetch-Ereignis jede Netzwerkanfrage innerhalb seines Scopes. Sie können aus dem Cache, aus dem Netzwerk oder aus einer Kombination von beidem antworten.

// sw.js
self.addEventListener('fetch', (event) => {
  // event.request describes the outgoing request
  console.log('intercepted', event.request.url);
});

Rückblick auf die Registrierung

So registrieren Sie einen Service Worker: Führen Sie eine Feature-Erkennung durch, rufen Sie register mit einer Skript-URL auf, beachten Sie den Scope und die HTTPS-Anforderung und behandeln Sie die Ereignisse install, activate und fetch im Worker-Skript.

Kurze Überprüfung

Testen Sie Ihr Verständnis der Registrierung eines Service Workers.

Rückblick

Sie haben gelernt, einen Service Worker zu registrieren:

Führen Sie eine Feature-Erkennung mit 'serviceWorker' in navigator durch.
register(url, { scope }) gibt ein Promise zurück.
Der Scope ist standardmäßig auf das Skriptverzeichnis begrenzt; HTTPS ist erforderlich.
Behandeln Sie install, activate und fetch im Worker.

Als Nächstes folgt die Cache API.

Häufig gestellte Fragen

Ist die Lektion „Einen Service Worker registrieren“ kostenlos?

Ja — der vollständige Text von „Einen Service Worker registrieren“ 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 „Einen Service Worker registrieren“?

Installieren und aktivieren Sie einen Service Worker. 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 1 von 4.

Wie lange dauert die Lektion „Einen Service Worker registrieren“?

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