Tutorials » Progressive Web Apps: Erstelle einen Service Worker
Erstelle einen Service Worker
Um einen Service Worker in deine PWA zu integrieren, gibt es ein paar Schritte, die du befolgen musst:
Registriere den Service Worker
Du musst deinen Service Worker im Hauptskript deiner PWA registrieren. Das geschieht normalerweise in einer JavaScript-Datei, die in deine HTML-Seite eingebunden wird. Dort rufst du die navigator.serviceWorker.register()-Methode auf, um den Service Worker zu registrieren.
Hier ist ein Code-Beispiel, das zeigt, wie du einen Service Worker in deiner Progressive Web App registrieren kannst. Speiche diesen Code in der Datei main.js:
Code anklicken zum kopieren
// Überprüfe, ob der Browser Service Worker unterstützt
if ('serviceWorker' in navigator) {
// Registriere den Service Worker
navigator.serviceWorker.register('/service-worker.js')
.then(function(registration) {
console.log('Service Worker wurde registriert:', registration);
})
.catch(function(error) {
console.log('Fehler bei der Registrierung des Service Workers:', error);
});
}Code anklicken zum kopieren
In diesem Beispiel überprüfen wir zuerst, ob der Browser den Service Worker unterstützt, indem wir prüfen, ob das Objekt serviceWorker in navigator vorhanden ist.
Dann verwenden wir navigator.serviceWorker.register() und übergeben den Pfad zur Service Worker-Datei als Argument. In diesem Fall lautet der Pfad "/service-worker.js". Du musst sicherstellen, dass du den tatsächlichen Pfad zu deiner Service Worker-Datei angibst.
Die register()-Methode gibt eine Meldung zurück, die entweder eine erfolgreiche Registrierung des Service Workers oder einen Fehler zurückgibt. In den then()- und catch()-Blöcken kannst du entsprechend auf Erfolg oder Fehler reagieren. In diesem Beispiel geben wir eine Erfolgsmeldung oder eine Fehlermeldung in der Konsole des Browsers aus.
Installiere den Service Worker
Der Service Worker muss installiert werden, damit er im Hintergrund laufen und bestimmte Ereignisse abfangen kann. In der install-Ereignislistener-Funktion des Service Workers kannst du die Ressourcen definieren, die im Cache gespeichert werden sollen.
Der folgende Code kommt in service-worker.js:
Code anklicken zum kopieren
// Installiere den Service Worker
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open('app-cache').then(function(cache) {
return cache.addAll([
'/',
'/index.html',
'/styles.css',
'/main.js',
'/images/logo.png'
]);
})
);
});Code anklicken zum kopieren
Mit diesem Code werden die verschiedenen Ereignislistener behandelt. In der install-Ereignislistener-Funktion wird der Cache geöffnet und bestimmte Ressourcen (wie HTML-Seiten, CSS-Dateien und Bilder) im Cache gespeichert.
Aktiviere den Service Worker
Nach der Installation muss der Service Worker aktiviert werden. In der activate-Ereignislistener-Funktion kannst du beispielsweise veraltete Caches löschen oder andere Vorgänge durchführen, um sicherzustellen, dass die PWA reibungslos funktioniert. Dieser Code kommt unterhalb des vorherigen Codes ebenfalls in die Datei service-worker.js:
Code anklicken zum kopieren
// Aktiviere den Service Worker
self.addEventListener('activate', function(event) {
event.waitUntil(
caches.keys().then(function(cacheNames) {
return Promise.all(
cacheNames.filter(function(cacheName) {
// Lösche veraltete Caches
return cacheName.startsWith('app-cache-') && cacheName !== 'app-cache';
}).map(function(cacheName) {
return caches.delete(cacheName);
})
);
})
);
});Code anklicken zum kopieren
Behandle Ereignisse im Service Worker
Der Service Worker kann auf verschiedene Ereignisse reagieren, wie zum Beispiel Anfragen (fetch), Push-Benachrichtigungen (push) oder Synchronisationsereignisse (sync). Du kannst entsprechende Listener-Funktionen im Service Worker definieren, um diese Ereignisse zu behandeln und entsprechend zu reagieren.
Dieser Code kommt ebenfalls in die Datei service-workers.js:
Code anklicken zum kopieren
// Behandle die Fetch-Anfragen
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request).then(function(response) {
return response || fetch(event.request);
})
);
});Code anklicken zum kopieren
Mit diesem fetch-Ereignislistener werden die Anfrage behandelt. Der Service Worker überprüft zuerst, ob die angeforderte Ressource im Cache vorhanden ist und liefert sie aus dem Cache zurück. Falls die Ressource nicht im Cache vorhanden ist, wird die Anfrage an den Server weitergeleitet.
Kommentare
Möchtest du etwas zu diesem Tutorial sagen?