Experimental
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 deshalb 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 desServiceWorker
-Lifecycles agieren. CacheStorage
- Repräsentiert einen Speicher für
Cache
-Objekte. Es ist das Hauptverzeichnis fürServiceWorker
. 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
undactivate
-Events, die vomServiceWorkerGlobalScope
entfernt werden als teil des Service-Worker-Lebenszyklus. Dies versichert, dass einige Events wie z. B. dasFetchEvent
nicht vomServiceWorker
, 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 vomServiceWorkerGlobalScope
einesServiceWorker
entfernt wird. Es beinhaltet Information über die Anfrage und der daraus resultierenden Antwort, und stellt dieFetchEvent.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, theInstallEvent
interface represents an install action that is dispatched on theServiceWorkerGlobalScope
of aServiceWorker
. As a child ofExtendableEvent
, it ensures that functional events such asFetchEvent
are not dispatched during installation. Navigator.serviceWorker
- Returns a
ServiceWorkerContainer
object, which provides access to registration, removal, upgrade, and communication with theServiceWorker
objects for the associated document. NotificationEvent
- The parameter passed into the
onnotificationclick
handler, theNotificationEvent
interface represents a notification click event that is dispatched on theServiceWorkerGlobalScope
of aServiceWorker
. 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
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.