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: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);
});
}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: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'
]);
})
);
});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: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);
})
);
})
);
});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: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);
})
);
});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?
Werbung
Du suchst einen günstigen Anbieter für Webhosting? Netcup hat alles, was du suchst!
Sichere dir jetzt einen 5€-Gutschein für Neukunden!