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.
Bevor du einen Service Worker erstellen kannst, musst du sicherstellen, dass dein Webserver HTTPS unterstützt. Service Worker funktionieren nur auf sicheren Ursprüngen (HTTPS) oder auf localhost für Entwicklungszwecke.
Erstelle eine HTML-Seite, die als Offline-Seite dient. Diese Seite wird angezeigt, wenn der Benutzer keine Internetverbindung hat und versucht, auf deine Website zuzugreifen.
<!DOCTYPE html>
<html lang="de-CH">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Offline</title>
</head>
<body>
<h1>Du bist offline</h1>
<p>Es sieht so aus, als ob du keine Internetverbindung hast. Bitte überprüfe deine Verbindung und versuche es erneut.</p>
</body>
</html>
Speichere diese Datei im root-Verzeichnis deiner Website.
Die Service-Klasse ist ein Javascript-Modul, das du in deine Standard-Javascript-Datei einbinden kannst, um den Service Worker zu registrieren und zu verwalten.
// Modules namespace
const Modules = {};
Modules.coreReady = (async () => {
const { Service } = await import('./modules/service.js');
Modules.service = new Service();
})();
document.addEventListener('DOMContentLoaded', async () => {
await Modules.coreReady;
});
Die Service-Klasse kannst du herunterladen und einbinden.
Für die untenstehehde Minimalversion des Service Workers ist die Service-Klasse nicht zwingend erforderlich, sie vereinfacht jedoch die spätere Erweiterung.
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.
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.
// 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, entweder über die Service-Klasse oder wie folgt direkt.
// 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.
<script src="/includes/default.js"></script>
Damit haben wir bereits einen laufenden Service Worker.
Der Service Worker zeigt bei fehlender Netzwerkverbindung die Offline-Seite an.
// 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.
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.
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.
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.
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.
Du hast es geschafft. Abonniere meine Benachrichtigungen, um weitere News und Anleitungen von mir zu erhalten.