Service Worker: Erste Schritte zur PWA

Die Anwendungslogik bei Progressive Web Apps befindet sich im Service Worker. Dazu gehören zum Beispiel Installation und Caching der App.

Service Worker anlegen & einbinden

Um den Service Worker als Datei schnell zu erkennen. Ist es am besten, ihn ins Hauptverzeichnis einer Website / Webanwendung zu legen und ihn "serviceworker.js" zu nennen.

Im HTML kann man ihn dann mit folgendem JavaScript-Code einbinden:

<script>
    if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('/serviceworker.js');
    }
</script>

Wenn der Service Worker vom Browser unterstützt wird, wird er mit dem Code registriert.

Einfachste Variante des Service Workers

Im Service Worker sollte das Event "fetch" abgefragt werden, was bei jeder HTTP-Abfrage ausgeführt wird. Hier ist es dann möglich, auf fehlende Internetverbindungen zu reagieren.

self.addEventListener('fetch', event => {
});

Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.

Über uns

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project