Stephan Böni - Service Worker Basis

Service Worker

Service Worker

Service Worker sind ein Web-Standard, der es Entwicklern ermöglicht, einen Hintergrund-Dienst für ihre Websites zu erstellen. Service Worker können zum Beispiel verwendet werden, um Offline-Funktionalität für Websites bereitzustellen, den Cache von Ressourcen zu verwalten oder Push-Benachrichtigungen zu senden.

Hier findest du eine Anleitung, wie du einen Service Worker in deine Website einbinden kannst.

Service Worker installieren

Ein Service Worker ist ein kleines Javascript, das sich idealerweise im root-Verzeichnis deiner Website befindet. Einmal aktiviert, ist es stets im Hintergrund für Aufgaben bereit.

Zuerst werden zwei globale Variablen definiert. Die erste benennt den Cache und die zweite definiert eine Offline-Seite, die bei fehlender Internetverbindung und fehlendem Cache angezeigt wird.

Dann muss der Service Worker installiert werden, der zuerst die Offline-Seite herunter lädt.

service-worker.js const cacheName = 'v1'; const offlineUrl = '/offline.html'; // Call Install Event self.addEventListener('install', event => { console.log('Service Worker: Installed'); event.waitUntil( (async () => { const cache = await caches.open(cacheName); // Setting {cache: 'reload'} in the new request ensures that the // response isn't fulfilled from the HTTP cache; i.e., it will be // from the network. await cache.add(new Request(offlineUrl, { cache: 'reload' })); })() ); // Force the waiting service worker to become the active service worker. self.skipWaiting(); });

Danach wird der Service Worker aktiviert, der zuerst nicht mehr gültige Caches entfernt. Falls unterstützt wird die Navigation voraus geladen.

service-worker.js // Call Activate Event self.addEventListener('activate', event => { console.log('Service Worker: Activated'); // Remove unwanted caches event.waitUntil( (async () => { // Remove unwanted caches caches.keys().then(cacheNames => { return Promise.all( cacheNames.map(cache => { if (cache !== cacheName) { console.log('Service Worker: Clearing Old Cache'); return caches.delete(cache); } }) ); }); })() ); });

Über die Ereignisse 'install' und 'activate' wird der Service Worker zuerst am Web-Client installiert und dann gestartet. Diese Initialisierung muss natürlich beim Besuch der Website über deine Standard-Javascript-Datei erfolgen.

default.js // Register a Service Worker if('serviceWorker' in navigator) { window.addEventListener('load', () => { navigator.serviceWorker .register('/service-worker.js') .then(reg => console.log('Service Worker: Registered')) .catch(err => console.log(`Service Worker: Error: ${err}`)); }); }

Die default.js wird ihrerseits in jeder HTML-Seite möglichst weit unten aufgerufen, z.B. direkt vor dem </body>-Tag.

HTML <script src="/includes/default.js"></script>

Damit haben wir bereits einen laufenden Service Worker.

Offline-Seite anzeigen

Der Service Worker zeigt bei fehlender Netzwerkverbindung die Offline-Seite an.

service-worker.js // Call Fetch Event self.addEventListener('fetch', event => { // Display offline page if network connection fails if (!navigator.onLine) { event.respondWith( fetch(event.request) .catch(error => { return caches.match(offlineUrl); }) ); } });

Damit ist der Service Worker voll PWA-tauglich.

Gratulation!

Du hast es geschafft. Nun ist es an der Zeit eine Caching-Strategie umzusetzen.

Die gesamte service-worker.js kannst du direkt herunterladen, falls du keine Lust hast, die obigen Code-Schnipsel zusammenzusetzen. Dort sind dann auch gleich alle nachfolgenden Ergänzungen enthalten.

Service Worker Caching

Ressourcen-Caching

Während Service Worker und PWAs zu Standards moderner Webanwendungen werden, ist das Ressourcen-Caching komplexer als je zuvor. In diesem Beitrag werden die wichtigsten Aspekte des Browser-Cachings behandelt.

Caching-Strategie umsetzen

Service Worker Cache-Update

Cache-Update

Wenn du nach der Umsetzung der Caching-Strategie deine Website aktualisierst, wirst du feststellen, dass weiterhin der alte Inhalt aus dem Cache geladen wird, maixmal für die nächsten neunzig Tage. So lange bleibt standardmässig der Cache gültig.

Das reicht dir nicht? Dann ist es Zeit für eine Cache-Update-Strategie.

Cache aktualisieren

Notification

Web Push Benachrichtigungen

Web-Push-Benachrichtigungen sind kurze Nachrichten, die du an die Geräte deiner Website-Besucher senden kannst. Hier findest du eine Anleitung, wie du Web-Push-Benachrichtigungen in deine Website einbinden und über den Service Worker versenden kannst.

Web Push Notifications

Dran bleiben

Du hast es geschafft. Abonniere meine Benachrichtigungen, um weitere News und Anleitungen von mir zu erhalten.

Feed einbinden