Service Worker API

Ein Service-Worker ist ein ereignisgesteuerter Worker, der an einem Ursprung und einem Pfad registriert ist. Sie ist eine JavaScript-Datei, die in Abhängigkeit zu einer Webseite steht, Anfragen von Ressourcen abfängt und cached. In manchen Situationen kann es das Verhalten der Webseite beeinflussen. Ein häufiger Anwendungsfall ist die Abfrage, ob ein Netzwerk verfügbar ist, oder nicht.

Ein Service-Worker läuft in einem Worker-Kontext. Es hat keinerlei Zugriff auf das DOM und läuft in einem separaten Thread, also isoliert vom JavaScript, dass die Hauptinteraktionslogik der Website steuert. Es läuft vollständig asynchron und verhindert die Ausführung anderer Scripte nicht. Daraus resultiert, dass APIs wie XHR  oder LocalStorage nicht in Service-Workern benutzt werden können.

Service-Worker laufen aus Sicherheitsgründen nur über das HTTPS-Protokoll. Veränderte Netzwerkanfragen könnten "Man in the middle"-Angriffe deutlich leichter machen.

Ein Service-Worker wird über die ServiceWorkerContainer.register()-Methode registriert. Falls sie erfolgreich war, wird Ihr Service-Worker vom Client heruntergeladen und versucht eine Installation/Aktivierung (siehe unten)  für URLs, die innerhalb der Quelle liegen oder die URLs, die Sie vorgeben.

Ihr Service-Worker muss folgenden Lebenszyklus durchlaufen:

1. Download
2. Installation
3. Aktivierung

Der Service-Worker wird sofort mit heruntergeladen, sobald der Nutzer erstmals eine von Service-Workern kontrollierte Seite aufruft.

Danach wird es alle 24 Stunden neu heruntergeladen. Es kann auch in kürzeren Abständen heruntergeladen werden, aber die 24 Stunden können nicht überschritten werden. Damit sollen die Ladezeiten kürzer werden.

Eine Installation wird versucht, wenn die heruntergeladene Datei neu ist, also Unterschiede byteweise verglichen mit dem bestehenden Service-Worker aufweist oder es der erste Service-Worker ist, der für diese Seite heruntergeladen wurde.

Wenn ein Service-Worker erstmals verfügbar ist, wird eine Installation versucht. Nach einer erfolgreichen Installation ist es aktiviert.

Wenn bereits ein bestehender Service-Worker installiert wurde, wird die neue Version im Hintergrund installiert, aber noch nicht aktiviert. Zu diesen Zeitpunkt wartet der Worker, bis alle Seiten heruntergeladen wurden, die noch den alten Service-Worker nutzen. Sobald alle Seiten geladen worden sind, wird der neue Service-Worker aktiviert.

Sie können ein Ereignishandler für das InstallEvent (en-US) erstellen. Standardmäßig wird der Worker für den Einsatz vorbereitet, wenn das Event feuert. Zum Beispiel beim erstellen eines Caches, bei der die Built-In Storage API verwendet wird und Assets hineingeladen werden, damit die App offline verwendet werden kann.

Außerdem existiert ein activate-Event. Wenn es feuert, ist es ein guter Zeitpunkt die alten Caches und andere Daten zu bereinigen, die mit der vorherigen Version ihres Workers zusammenhängen.

Ihr Service-Worker kann mit dem FetchEvent (en-US) auf Anfragen antworten. Sie können die Antworten auf die Anfragen verändern, wie Sie wollen. Nutzen Sie dazu die FetchEvent.respondWith (en-US)-Methode.

Für eine komplette Anleitung, die zeigt, wie Sie Ihr erstes Beispiel erstellen, siehe Using Service Workers.

Service-Worker werden auch benutzt für:

• die Synchronisation von Hintergrunddaten
• um auf Anfragen anderer Quellen zu antworten
• Um Updates von Daten zu erhalten, die sehr teuer in der Kalkulation sind, wie z. B. Standort-Daten, die dann in einem Datensatz verwendet werden können.
• Das clientseitige Kompilieren von CoffeeScript aus Entwicklergründen
• Hooks für Hintergrunddienste
• Zum Erstellen benutzerdefinierter Templates anhand von URL-Mustern
• Performancebeschleunigung wie z. B. das Vorladen von Bildern

In Zukunft werden Service-Worker zu weiteren nützlichen Dingen fähig sein, die sie näher an eine native App bringen. Andere Spezifikationen können und werden den Service-Worker-Kontext benutzen. Zum Beispiel:

• Hintergrund-Synchronisation: Ein Service-Worker kann gestartet werden, wenn keine Nutzer auf der Seite sind, um den Cache zu aktualisieren usw.
• Auf Push-Benachrichtigungen reagieren: Ein Service-Worker kann Benachrichtigungen an Nutzer senden, um mitzuteilen, dass neuer Inhalt verfügbar ist,
• Auf eine bestimmte Uhrzeit und ein bestimmtes Datum reagieren
• Damit kann geofencing betrieben werden

Cache

Repräsentiert einen Speicher für Request (en-US) / Response-Objeltpaare, die als ein Teil des ServiceWorker-Lifecycles agieren.

CacheStorage (en-US)

Repräsentiert einen Speicher für Cache-Objekte. Es ist das Hauptverzeichnis für ServiceWorker. Es beinhaltet alle benannten Caches basierend auf Strings, auf die der Worker zugreifen kann.

Client (en-US)

Repräsentiert den Gültigkeitsbereich von einem Service-Worker-Client. Ein Service-Worker-Client ist entweder ein Dokument in einem Browser-Kontext oder ein SharedWorker, welches von einem aktiven Worker gesteuert wird.

Clients (en-US)

Repräsentiert einen Container von Client (en-US)-Objekten; die hauptsächtliche Methode, um die aktiven Service-Worker-Clients anzusteuern.

ExtendableEvent (en-US)

Erweitert die Lebensdauer der install und activate-Events, die vom ServiceWorkerGlobalScope (en-US) entfernt werden als teil des Service-Worker-Lebenszyklus. Dies versichert, dass einige Events wie z. B. das FetchEvent (en-US) nicht vom ServiceWorker, solange sie veraltete Cache-Einträge löschen usw.

ExtendableMessageEvent (en-US)

Das Event-Objekt von einem message-Event, welches von einem Service-Worker gefeuert wird.

FetchEvent (en-US)

Die Parameter, die dem ServiceWorkerGlobalScope.onfetch (en-US)-Handler übergeben werden. FetchEvent repräsentiert eine Fetch-Aktion, die vom ServiceWorkerGlobalScope (en-US) eines ServiceWorker entfernt wird. Es beinhaltet Information über die Anfrage und der daraus resultierenden Antwort, und stellt die FetchEvent.respondWith() (en-US)-Methode bereit. Es ermöglicht eine willkürliche Antwort, die zurück  zur kontrollierten Seite gesendet wird.

InstallEvent (en-US)

The parameter passed into the oninstall (en-US) handler, the InstallEvent interface represents an install action that is dispatched on the ServiceWorkerGlobalScope (en-US) of a ServiceWorker. As a child of ExtendableEvent (en-US), it ensures that functional events such as FetchEvent (en-US) are not dispatched during installation. 

Navigator.serviceWorker (en-US)

Returns a ServiceWorkerContainer object, which provides access to registration, removal, upgrade, and communication with the ServiceWorker objects for the associated document.

NotificationEvent (en-US)

The parameter passed into the onnotificationclick (en-US) handler, the NotificationEvent interface represents a notification click event that is dispatched on the ServiceWorkerGlobalScope (en-US) of a ServiceWorker.

ServiceWorker

Represents a service worker. Multiple browsing contexts (e.g. pages, workers, etc.) can be associated with the same ServiceWorker object.

ServiceWorkerContainer

Provides an object representing the service worker as an overall unit in the network ecosystem, including facilities to register, unregister and update service workers, and access the state of service workers and their registrations.

ServiceWorkerGlobalScope (en-US)

Represents the global execution context of a service worker.

ServiceWorkerMessageEvent (en-US)

Contains information about an event sent to a ServiceWorkerContainer target. 

ServiceWorkerRegistration (en-US)

Represents a service worker registration.

SyncEvent (en-US)

The SyncEvent interface represents a sync action that is dispatched on the ServiceWorkerGlobalScope (en-US) of a ServiceWorker. 

SyncManager (en-US)

Provides an interface for registering and listing sync registrations.

WindowClient (en-US)

Represents the scope of a service worker client that is a document in a browser context, controlled by an active worker. This is a special type of Client (en-US) object, with some additional methods and properties available.

• ServiceWorker Cookbook
• Using Service Workers
• Service workers basic code example
• Is ServiceWorker ready?
• Promises
• Using web workers