info@a-coding-project.de

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 => {
});

Über uns

Stefan Wienströer

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

Auch interessant