HTML-Tools

Kostenlose Service Worker Modul-Template Generator

Generieren Sie ES-Modul-Service-Worker-Templates mit Cache-Strategien, Precache-Liste und Offline-Unterstutzung.

Tool wird geladen...

Was ist Service Worker Modul-Template Generator?

ES-Modul-Service-Worker verwenden die Option type: 'module' im register()-Aufruf und ermöglichen so die import/export-Syntax anstelle von importScripts(). Dies ermöglicht standardmäßige JavaScript-Modulmuster, statische Importe und besseres Abhängigkeitsmanagement. Kombiniert mit konfigurierbaren Cache-Strategien (cache-first, network-first, stale-while-revalidate, network-only, cache-only) kann ein Service Worker steuern, wie Netzwerkanfragen behandelt werden, kritische Assets bei der Installation zwischenspeichern und Offline-Fallback-Seiten ausliefern.

Kurze Antwort

Generieren Sie ein ES-Modul-Service-Worker-Template mit konfigurierbaren Cache-Strategien (cache-first, network-first, stale-while-revalidate, network-only, cache-only), Precache-URL-Listen, Auto-Aktivierung (skipWaiting + clients.claim) und Unterstützung für Offline-Fallback-Seiten. Verwendet ES-Modul-Syntax mit statischem import/export anstelle von importScripts.

Last updated: 2026-05-31

Einschränkungen

ES-Modul-Service-Worker unterstützen kein dynamisches import() — alle Modulabhängigkeiten müssen statisch auf oberster Ebene deklariert werden. Dynamisches Code-Laden erfordert das klassische importScripts-Muster.
Cross-Origin-Modul-Skripte werden in Service Workern nicht unterstützt. Importierte Module müssen vom gleichen Ursprung stammen. Wenn Sie Skripte von einem CDN laden müssen, verwenden Sie das klassische Service-Worker-Muster oder bündeln Sie den Code lokal.
Der Service-Worker-Lebenszyklus (install -> waiting -> activate -> update) kann während der Entwicklung Versionskonflikte verursachen. Die Browser-DevTools-Optionen 'Update on Reload' und 'Bypass for Network' helfen, aber die Produktionsversionierung erfordert sorgfältiges Cache-Naming und Bereinigungslogik.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

So nutzt du dieses Tool

Wählen Sie Cache-Strategien für verschiedene Routentypen: cache-first für statische Assets, network-first für API-Aufrufe, stale-while-revalidate für häufig aktualisierte Inhalte und network-only für sensible Endpunkte.
Geben Sie die Liste der URLs ein, die während des install-Events zwischengespeichert werden sollen. Diese werden abgerufen und im Cache gespeichert, sodass sie sofort offline verfügbar sind.
Schalten Sie die Auto-Aktivierung um, um skipWaiting und clients.claim zu aktivieren, wodurch der neue Service Worker sofort für alle Clients aktiviert wird, ohne auf den nächsten Seitenaufruf zu warten.
Aktivieren Sie optional die Offline-Fallback-Seite. Wenn ein fetch fehlschlägt und die Ressource nicht im Cache ist, serviert der Service Worker die Fallback-Seite anstelle des browser-eigenen Offline-Fehlers.

Wofür du es nutzen kannst

Erstellen Sie eine progressive Web-App, die alle statischen Assets bei der Installation zwischenspeichert, network-first für API-Daten verwendet und eine Offline-Fallback-Seite für nicht zwischengespeicherte Routen bereitstellt.
Erstellen Sie eine Content-Site mit stale-while-revalidate-Caching für Artikel: Servieren Sie die zwischengespeicherte Version sofort und aktualisieren Sie den Cache im Hintergrund, sodass Inhalte frisch bleiben, ohne auf das Netzwerk warten zu müssen.
Generieren Sie ein Projekt-Template mit einem Service-Worker-Gerüst, das Entwickler mit eigenen Cache-Strategien, Precache-Listen und Offline-Verhalten anpassen können.

Anwendungsfalle

Praxisbeispiele

Beispiel

Statische PWA-Site mit vollständiger Offline-Unterstützung

Eine Dokumentationsseite soll offline funktionieren. Generieren Sie einen Service Worker mit cache-first-Strategie für CSS, JS und Schriftarten, stale-while-revalidate für HTML-Seiten, network-first für Suchanfragen und einer Offline-Fallback-Seite. Die Precache-Liste enthält alle kritischen Seiten, sodass die gesamte Site nach dem ersten Besuch ohne Netzwerkzugriff funktioniert.

Beispiel

Modulbasierter Service Worker mit gemeinsam genutzten Hilfsfunktionen

Ein Team, das mehrere PWAs verwaltet, möchte Cache-Hilfsfunktionen zwischen Service Workern teilen. Verwenden Sie das ES-Modul-Template mit statischen Importen: import { cacheFirst, networkFirst } from './cache-utils.js'. Das gemeinsam genutzte Hilfsmodul kann separat gewartet und von allen Service Workern importiert werden, wodurch importScripts und globale Scope-Verschmutzung entfallen.

Haufige Fehler

importScripts() innerhalb eines ES-Modul-Service-Workers zu verwenden — ES-Module unterstützen statischen import/export und benötigen kein importScripts(). Die Vermischung beider Ansätze verursacht Laufzeitfehler. Verwenden Sie stattdessen Standard-Import-Anweisungen.
Das activate-Event für die Cache-Bereinigung nicht zu behandeln — alte Caches von früheren Service-Worker-Versionen sammeln sich an, wenn sie nicht bereinigt werden. Fügen Sie immer einen activate-Handler hinzu, der veraltete Cache-Speicher durch Vergleich der Cache-Namen mit einer versionierten Liste löscht.
Den Service Worker nicht korrekt zu scopen — der Scope eines Service Workers wird durch seinen URL-Pfad bestimmt. Ein Service Worker unter /sw.js steuert / und darunter, aber ein Service Worker unter /blog/sw.js steuert nur /blog/ und darunter. Verwenden Sie die scope-Option in register() explizit, um Verwirrung zu vermeiden.

Überprüfung

Öffnen Sie das Application-Panel in DevTools, gehen Sie zu Service Workers und überprüfen Sie, ob der Service Worker mit dem Status 'activated and running' registriert ist. Prüfen Sie, ob der Scope den erwarteten Pfadbereich abdeckt.
Schalten Sie in DevTools (Network-Tab) in den Offline-Modus und laden Sie die Seite neu. Überprüfen Sie, ob zwischengespeicherte Seiten fehlerfrei geladen werden und die Offline-Fallback-Seite für nicht zwischengespeicherte URLs erscheint. Prüfen Sie die Konsole auf fetch-Handler-Fehler.

FAQ

Fragen zu Service Worker Modul-Template Generator

Was ist der Vorteil von ES-Modul-Service-Workern gegenüber klassischen importScripts-basierten Workern?

ES-Modul-Service-Worker unterstützen natives import/export, was standardmäßige JavaScript-Modulmuster, statische Analyse, Tree Shaking und besseres Abhängigkeitsmanagement ermöglicht. Sie vermeiden die globale Scope-Verschmutzung von importScripts und bieten eine ordnungsgemäße Fehlerbehandlung für fehlende Importe. ES-Modul-Service-Worker sind jedoch auf Same-Origin-Importe beschränkt und unterstützen kein dynamisches import() oder Cross-Origin-Modul-Skripte.

Wie unterscheidet sich cache-first von stale-while-revalidate in der Praxis?

Cache-first gibt die zwischengespeicherte Antwort sofort zurück, ohne auf das Netzwerk zu warten. Es ruft nur dann vom Netzwerk ab, wenn der Cache keinen Treffer erzielt. Stale-while-revalidate gibt die zwischengespeicherte Antwort sofort zurück UND führt eine Netzwerkanfrage im Hintergrund durch, um den Cache für das nächste Mal zu aktualisieren. Cache-first ist ideal für unveränderliche Assets wie versionierte CSS/JS-Dateien. Stale-while-revalidate ist besser für HTML-Seiten oder API-Antworten, die einigermaßen aktuell sein sollten, aber eine gewisse Verzögerung bei Aktualisierungen tolerieren können.

Warum wird mein Service Worker nicht sofort nach der Registrierung aktiviert?

Standardmäßig tritt ein neuer Service Worker in einen Wartezustand ein, bis alle vorhandenen Clients geschlossen oder weg navigiert werden. Dies verhindert Versionskonflikte, bei denen zwei Service Worker verschiedene Seiten derselben App steuern. Der Aufruf von self.skipWaiting() während des install- oder activate-Events umgeht den Wartezustand, und clients.claim() übernimmt sofort die Kontrolle über alle unkontrollierten Clients. Das generierte Template enthält diese als optionalen Umschalter.

Kann ich dynamisches import() innerhalb eines ES-Modul-Service-Workers verwenden?

Nein. ES-Modul-Service-Worker unterstützen statische Import-Deklarationen, aber keine dynamischen import()-Aufrufe. Dynamische Importe erfordern, dass die Modul-Referenz zur Laufzeit änderbar ist, was mit dem Ausführungsmodell des Service Workers kollidiert. Alle Modulabhängigkeiten müssen statisch auf oberster Ebene der Datei deklariert werden. Wenn Sie dynamisches Code-Laden benötigen, erwägen Sie, die Logik in separate statische Module aufzuteilen, die verschiedene Szenarien abdecken, oder verwenden Sie das klassische Service-Worker-Muster mit importScripts.

Verwandte Tools