Service Worker

Nutzer erwarten, dass Apps bei langsamen oder unzuverlässigen Netzwerkverbindungen oder sogar offline gestartet werden. Sie erwarten, dass die Inhalte, mit denen sie zuletzt interagiert haben, wie z. B. Medientitel, Tickets und Reisepläne, verfügbar und nutzbar sind. Wenn eine Anfrage nicht möglich ist, erwarten sie, dass die App sie informiert, anstatt ohne Meldung auszusetzen oder abzustürzen. Und die Nutzer möchten all dies schnell erledigen. Wie wir in dieser Studie sehen, machen Millisekunden eine Million – schon eine Verbesserung der Ladezeit um 0,1 Sekunden kann die Conversion-Rate um bis zu 10 % steigern. Zusammenfassung: Nutzer erwarten, dass PWAs zuverlässig sind. Deshalb gibt es Service Worker.

Hallo Service Worker

Ein Service Worker als Middleware-Proxy, der geräteseitig zwischen Ihrer PWA und Servern ausgeführt wird und sowohl Ihre eigenen als auch domainübergreifenden Server umfasst.

Wenn eine App eine Ressource anfordert, die vom Geltungsbereich des Service Workers abgedeckt ist – auch wenn der Nutzer offline ist – fängt der Service Worker die Anfrage ab und fungiert als Netzwerk-Proxy. Es kann dann entscheiden, ob die Ressource aus dem Cache über die Cache Storage API, aus dem Netzwerk wie normalerweise ohne einen Service Worker bereitgestellt oder mithilfe eines lokalen Algorithmus erstellt werden soll. Auf diese Weise können Sie Nutzern ähnliche Funktionen bieten wie eine Plattform-App. Sie kann sogar offline verwendet werden.

Service Worker registrieren

Bevor ein Service Worker die Kontrolle über Ihre Seite übernimmt, muss sie für Ihre PWA registriert werden. Wenn also ein Nutzer zum ersten Mal auf Ihre PWA zugreift, werden Netzwerkanfragen direkt an Ihren Server gesendet, da der Service Worker Ihre Seiten noch nicht verwaltet.

Nachdem Sie geprüft haben, ob der Browser die Service Worker API unterstützt, kann Ihre PWA einen Service Worker registrieren. Nach dem Laden richtet der Service Worker einen Shop zwischen Ihrer PWA und dem Netzwerk ein, fängt Anfragen ab und stellt die entsprechenden Antworten bereit.

if ('serviceWorker' in navigator) {
   navigator.serviceWorker.register("/serviceworker.js");
}

Prüfen, ob ein Service Worker registriert ist

Wenn Sie prüfen möchten, ob ein Service Worker registriert ist, verwenden Sie die Entwicklertools in Ihrem bevorzugten Browser.

In Firefox und Chromium-basierten Browsern (Microsoft Edge, Google Chrome oder Samsung Internet):

  1. Öffnen Sie die Entwicklertools und klicken Sie dann auf den Tab Anwendung.
  2. Wählen Sie im linken Bereich Service Workers aus.
  3. Prüfen Sie, ob die Skript-URL des Service Workers mit dem Status „Aktiviert“ angezeigt wird. Im Abschnitt zum Lebenszyklus in diesem Kapitel erfahren Sie, was dieser Status bedeutet. In Firefox kann der Status „Wird ausgeführt“ oder „Angehalten“ sein.

In Safari:

  1. Klicken Sie auf das Menü Develop und dann auf das Untermenü Service Workers.
  2. Prüfen Sie, ob im Untermenü ein Eintrag mit dem aktuellen Ursprung angezeigt wird. Dadurch wird ein Inspector zum Kontext des Service Workers geöffnet.
Service Worker-Entwicklertools für Chrome, Firefox und Safari
Service Worker-Entwicklertools für Chrome, Firefox und Safari

Umfang

Der Ordner, in dem sich Ihr Service Worker befindet, bestimmt den Bereich. Ein Service Worker, der in example.com/my-pwa/sw.js lebt, kann jede Navigation innerhalb des my-pwa-Pfads oder darunter steuern, z. B. example.com/my-pwa/demos/. Service Worker können nur Elemente (Seiten, Worker, zusammenfassend „Kunden“) in ihrem Geltungsbereich steuern. Der Umfang gilt für Browsertabs und PWA-Fenster.

Pro Bereich ist nur ein Service Worker zulässig. Wenn sie aktiv sind und ausgeführt werden, ist in der Regel nur eine Instanz verfügbar, unabhängig davon, wie viele Clients sich im Arbeitsspeicher befinden (z. B. PWA-Fenster oder Browsertabs).

In Safari gibt es eine komplexere Bereichsverwaltung, die als Partitionen bezeichnet wird. Diese wirkt sich auf die Funktionsweise von Bereichen aus, wenn Sie domainübergreifende iFrames verwenden. Weitere Informationen zur Implementierung von WebKit finden Sie in diesem Blogpost.

Lifecycle

Für Service Worker gibt es einen Lebenszyklus, der vorgibt, wie sie installiert werden – unabhängig von Ihrer PWA-Installation. Der Service Worker-Lebenszyklus beginnt mit der Registrierung des Service Workers. Der Browser versucht dann, die Service Worker-Datei herunterzuladen und zu parsen. Wenn das Parsen erfolgreich ist, wird das Ereignis install ausgelöst. Das install-Ereignis wird nur einmal ausgelöst.

Die Service Worker-Installation erfolgt im Hintergrund, ohne dass eine Nutzerberechtigung erforderlich ist, selbst wenn der Nutzer die PWA nicht installiert. Die Service Worker API ist sogar auf Plattformen verfügbar, die keine PWA-Installation unterstützen, z. B. Safari und Firefox auf Desktop-Geräten.

Nach der Installation hat der Service Worker noch keine Kontrolle über seine Clients, einschließlich Ihrer PWA. Es muss zuerst aktiviert werden. Wenn der Service Worker für die Steuerung seiner Clients bereit ist, wird das Ereignis activate ausgelöst. Das bedeutet jedoch nicht, dass die Seite, über die der Service Worker registriert wurde, verwaltet wird. Standardmäßig übernimmt der Service Worker die Kontrolle erst, wenn Sie diese Seite das nächste Mal aufrufen, weil entweder die Seite neu geladen oder die PWA noch einmal geöffnet wird.

Mit dem Objekt self können Sie auf Ereignisse im globalen Geltungsbereich des Service Workers warten.

serviceworker.js

// This code executes in its own worker or thread
self.addEventListener("install", event => {
   console.log("Service worker installed");
});
self.addEventListener("activate", event => {
   console.log("Service worker activated");
});

Service Worker aktualisieren

Service Worker werden aktualisiert, wenn der Browser feststellt, dass der aktuelle Service Worker den Client und die neue Version (von Ihrem Server) derselben Datei in Byte unterschiedlich sind.

Nach erfolgreicher Installation wartet der neue Service Worker mit der Aktivierung, bis der vorhandene (alte) Service Worker keine Clients mehr steuert. Dieser Status wird als „Warten“ bezeichnet und sorgt dafür, dass immer nur eine Version Ihres Service Workers ausgeführt wird. Wenn Sie eine Seite aktualisieren oder die PWA noch einmal öffnen, übernimmt der neue Service Worker die Kontrolle nicht. Der Nutzer muss alle Tabs und Fenster mithilfe des aktuellen Service Workers schließen oder verlassen und dann zurück navigieren. Erst dann übernimmt der neue Service Worker die Kontrolle. Weitere Informationen finden Sie in diesem Service Worker-Lebenszyklusartikel.

Service Worker-Lebensdauer

Nach der Installation und Registrierung kann ein Service Worker alle Netzwerkanfragen innerhalb seines Geltungsbereichs verwalten. Er wird in einem eigenen Thread ausgeführt, wobei Aktivierung und Beendigung vom Browser gesteuert werden. So funktioniert sie sogar, bevor oder nachdem Ihre PWA geöffnet ist. Auch wenn Service-Worker in ihrem eigenen Thread ausgeführt werden, gibt es keine Garantie, dass der In-Memory-Status zwischen den Ausführungen eines Service Workers bestehen bleibt. Stellen Sie daher sicher, dass alles, was Sie bei jeder Ausführung wiederverwenden möchten, entweder in IndexedDB oder einem anderen nichtflüchtigen Speicher verfügbar ist.

Wenn der Service Worker noch nicht ausgeführt wird, wird er immer dann gestartet, wenn eine Netzwerkanfrage in seinem Geltungsbereich angefordert wird oder wenn ein auslösendes Ereignis wie regelmäßige Hintergrundsynchronisierung oder eine Push-Nachricht empfangen wird.

Service Worker leben nicht auf unbestimmte Zeit. Die genauen Zeiten variieren je nach Browser, aber Service Worker werden beendet, wenn sie einige Sekunden lang inaktiv waren oder zu lange beschäftigt sind. Wenn ein Service Worker beendet wurde und aufgrund eines Ereignisses ihn gestartet wird, wird er neu gestartet.

Leistungsspektrum

Bei einem registrierten und aktiven Service Worker haben Sie einen Thread mit einem komplett anderen Ausführungslebenszyklus als dem Hauptthread in Ihrer PWA. Standardmäßig verhält sich die Service Worker-Datei selbst jedoch nicht. Es werden keine Ressourcen im Cache gespeichert und keine Ressourcen bereitgestellt, da dies über Ihren Code erfolgen muss. In den folgenden Kapiteln erfahren Sie, wie das geht.

Die Funktionen des Service Workers dienen nicht nur der Proxy-Bereitstellung oder Bereitstellung von HTTP-Anfragen. Darüber hinaus stehen ihm weitere Funktionen für andere Zwecke zur Verfügung, z. B. für die Ausführung von Code im Hintergrund, Web-Push-Benachrichtigungen und die Verarbeitung von Zahlungen. Wir besprechen diese Ergänzungen im Kapitel zu den Funktionen.

Ressourcen