Service Worker API

Dies ist eine experimentelle Technologie
Da diese Technologie noch nicht definitiv implementiert wurde, sollte die Browserkompatibilität beachtet werden. Es ist auch möglich, dass die Syntax in einer späteren Spezifikation noch geändert wird.

Service-Worker verhalten sich im Wesentlichen wie Proxy-Server, welche zwischen der Webanwendung bzw. dem Browser und dem Netzwerk (sofern dieses verfügbar ist) sitzen. Sie sollen u. a. das Erstellen wirksamer Offline-Erfahrungen ermöglichen und können Netzwerkanfragen abfangen und passende Maßnahmen abhängig davon ergreifen, ob das Netzwerk verfügbar ist und ob der Server veränderte Ressourcen enthält. Sie erlauben außerdem den Zugriff auf Push-Benachrichtigungen und Background Sync APIs.

Konzepte von Service-Workern und deren Nutzung

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.

Hinweis: Service-Worker haben in Bereichen wie AppCache gezeigt, dass sie dort besonders gut genutzt werden können, da sie keine Vermutungen darüber treffen, was Sie machen wollen und brechen ihre Aktionen entsprechend ab. Sie haben deshlab die Kontrolle über alles.

Hinweis: Service-Worker basieren auf Promises. Generell sind sie abhängig von Anfragen und sie werden mit einer erfolgreichen oder einer fehlerhaften Aktion antworten. Die Architektur ist deshalb ideal dafür.

Registrierung

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.

Download, Installation und Aktivierung

Ihr Service-Worker muss folgenden Lebenszyklus durchlaufen:

Download
Installation
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 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 auf Anfragen antworten. Sie können die Antworten auf die Anfragen verändern, wie Sie wollen. Nutzen Sie dazu die FetchEvent.respondWith-Methode.

Hinweis: Weil oninstall/onactivate eine Weile benötigen, um ihre Aktionen abzuschließen, ist es empfehlenswert, eine waitUntil-Methode bereitzustellen, die, wenn oninstall oder onactivate gefeuert werden, ein Promise geliefert wird. Events, die der Funktion dienen, werden dem Service-Worker nicht enthalten und der Promise wird erfolgreich ausgeführt.

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

Weitere Anwendungsbereiche

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

Schnittstellen

Cache: Repräsentiert einen Speicher für Request / Response-Objeltpaare, die als ein Teil des ServiceWorker-Lifecycles agieren.
CacheStorage: 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: 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: Repräsentiert einen Container von Client-Objekten; die hauptsächtliche Methode, um die aktiven Service-Worker-Clients anzusteuern.
ExtendableEvent: Erweitert die Lebensdauer der install und activate-Events, die vom ServiceWorkerGlobalScope entfernt werden als teil des Service-Worker-Lebenszyklus. Dies versichert, dass einige Events wie z. B. das FetchEvent nicht vom ServiceWorker, solange sie veraltete Cache-Einträge löschen usw.
ExtendableMessageEvent: Das Event-Objekt von einem message-Event, welches von einem Service-Worker gefeuert wird.
FetchEvent: Die Parameter, die dem ServiceWorkerGlobalScope.onfetch-Handler übergeben werden. FetchEvent repräsentiert eine Fetch-Aktion, die vom ServiceWorkerGlobalScope eines ServiceWorker entfernt wird. Es beinhaltet Information über die Anfrage und der daraus resultierenden Antwort, und stellt die FetchEvent.respondWith()-Methode bereit. Es ermöglicht eine willkürliche Antwort, die zurück zur kontrollierten Seite gesendet wird.
InstallEvent: The parameter passed into the oninstall handler, the InstallEvent interface represents an install action that is dispatched on the ServiceWorkerGlobalScope of a ServiceWorker. As a child of ExtendableEvent, it ensures that functional events such as FetchEvent are not dispatched during installation.
Navigator.serviceWorker: Returns a ServiceWorkerContainer object, which provides access to registration, removal, upgrade, and communication with the ServiceWorker objects for the associated document.
NotificationEvent: The parameter passed into the onnotificationclick handler, the NotificationEvent interface represents a notification click event that is dispatched on the ServiceWorkerGlobalScope 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: Represents the global execution context of a service worker.
ServiceWorkerMessageEvent: Contains information about an event sent to a ServiceWorkerContainer target.
ServiceWorkerRegistration: Represents a service worker registration.
SyncEvent: The SyncEvent interface represents a sync action that is dispatched on the ServiceWorkerGlobalScope of a ServiceWorker.
SyncManager: Provides an interface for registering and listing sync registrations.
WindowClient: 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 object, with some additional methods and properties available.

Spezifikationen

Spezifikation	Status	Kommentar
Service Workers	Arbeitsentwurf	Initial definition.

Browser-Kompatibilität

Wir konvertieren die Kompatibilitätsdaten in ein maschinenlesbares JSON Format. Diese Kompatibilitätstabelle liegt noch im alten Format vor, denn die darin enthaltenen Daten wurden noch nicht konvertiert. Finde heraus wie du helfen kannst!

Desktop
Mobile

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	40.0	44.0 (44.0)	Nicht unterstützt	24	Nicht unterstützt
install/activate events	40.0	44.0 (44.0)	Nicht unterstützt	(Ja)	Nicht unterstützt
fetch event/request/ `respondWith()`	40.0	44.0 (44.0)	Nicht unterstützt	Nicht unterstützt	Nicht unterstützt
caches/cache	42.0	39.0 (39.0)	Nicht unterstützt	Nicht unterstützt	Nicht unterstützt

Feature	Android	Chrome for Android	Firefox Mobile (Gecko)	Firefox OS	IE Phone	Opera Mobile	Safari Mobile
Basic support		40.0	44.0 (44.0)	(Ja)	Nicht unterstützt	(Ja)	Nicht unterstützt
install/activate events	Nicht unterstützt	40.0	44.0 (44.0)	(Ja)	Nicht unterstützt	(Ja)	Nicht unterstützt
fetch event/request/ `respondWith()`	Nicht unterstützt	40.0	44.0 (44.0)	(Ja)	Nicht unterstützt	Nicht unterstützt	Nicht unterstützt
caches/cache	Nicht unterstützt	40.0	39.0 (39.0)	(Ja)	Nicht unterstützt	Nicht unterstützt	Nicht unterstützt

Note: For backwards compatibility, you could choose to use service workers and AppCache on the same web app to do equivalent things (if the AppCache will support doing those things, of course.) What happens in such a case is that browsers that don’t support Service Workers will use AppCache, and those that do will ignore the AppCache and let the service worker take over.