Worker – Übersicht

Wie Webworker und Serviceworker die Leistung Ihrer Website verbessern können und wann Sie einen Webworker oder einen Serviceworker verwenden sollten.

Andrew Guan

Demián Renzulli

In dieser Übersicht wird erläutert, wie Webworker und Serviceworker die Leistung Ihrer Website verbessern können und wann Sie einen Webworker oder einen Serviceworker verwenden sollten. In den restlichen Artikeln dieser Reihe finden Sie spezifische Muster für die Kommunikation zwischen Fenstern und Dienst-Workern.

So können Mitarbeiter Ihre Website verbessern

Der Browser verwendet einen einzelnen Thread (den Hauptthread), um das gesamte JavaScript auf einer Webseite auszuführen und Aufgaben wie das Rendern der Seite und die Garbage Collection auszuführen. Wenn zu viel JavaScript-Code ausgeführt wird, kann der Haupt-Thread blockiert werden. Das führt dazu, dass der Browser diese Aufgaben verzögert ausführt und die Nutzerfreundlichkeit beeinträchtigt wird.

Bei der Entwicklung von iOS-/Android-Anwendungen wird häufig ein Muster verwendet, um dafür zu sorgen, dass der Hauptthread der App kostenlos bleibt, um auf Nutzerereignisse zu reagieren. Dabei werden Vorgänge auf zusätzliche Threads ausgelagert. In den neuesten Android-Versionen führt das Blockieren des Hauptthreads zu lange zu einem App-Absturz.

Im Web wurde JavaScript auf dem Konzept eines einzelnen Threads entwickelt und es fehlen Funktionen, die für die Implementierung eines Multithreading-Modells wie bei Apps erforderlich sind, z. B. gemeinsam genutzter Arbeitsspeicher.

Trotz dieser Einschränkungen kann im Web ein ähnliches Muster erreicht werden, indem Scripts mithilfe von Workern in Hintergrundthreads ausgeführt werden. So können Aufgaben ausgeführt werden, ohne den Hauptthread zu beeinträchtigen. Worker sind ein vollständiger JavaScript-Scope, der in einem separaten Thread ohne gemeinsamen Arbeitsspeicher ausgeführt wird.

In diesem Artikel erfahren Sie mehr über zwei verschiedene Arten von Workern (Webworker und Serviceworker), ihre Gemeinsamkeiten und Unterschiede sowie die gängigsten Muster für ihre Verwendung auf Produktionswebsites.

Webworker und Serviceworker

Ähnlichkeiten

Web Worker und Service Worker sind zwei Arten von Workern, die für Websites verfügbar sind. Sie haben einige Gemeinsamkeiten:

• Beide werden in einem sekundären Thread ausgeführt, sodass JavaScript-Code ausgeführt werden kann, ohne den Hauptthread und die Benutzeroberfläche zu blockieren.
• Sie haben keinen Zugriff auf die Objekte Window und Document und können daher nicht direkt mit dem DOM interagieren. Außerdem haben sie nur eingeschränkten Zugriff auf Browser-APIs.

Unterschiede

Man könnte meinen, dass die meisten Aufgaben, die an einen Webworker delegiert werden können, auch in einem Serviceworker ausgeführt werden können und umgekehrt. Es gibt jedoch wichtige Unterschiede zwischen ihnen:

• Im Gegensatz zu Webworkern können Sie mit Serviceworkern Netzwerkanfragen (über das Ereignis fetch) abfangen und im Hintergrund auf Push-API-Ereignisse warten (über das Ereignis push).
• Eine Seite kann mehrere Webworker erstellen, aber ein einzelner Service Worker steuert alle aktiven Tabs im Umfang, in dem er registriert wurde.
• Die Lebensdauer des Web-Workers ist eng mit dem Tab verknüpft, zu dem er gehört, während der Lebenszyklus des Dienst-Workers davon unabhängig ist. Wenn Sie also den Tab schließen, auf dem ein Webworker ausgeführt wird, wird er beendet. Ein Serviceworker kann dagegen im Hintergrund weiter ausgeführt werden, auch wenn auf der Website keine aktiven Tabs geöffnet sind.

Anwendungsfälle

Die Unterschiede zwischen den beiden Arten von Arbeitern deuten darauf hin, in welchen Situationen Sie den einen oder den anderen verwenden sollten:

Anwendungsfälle für Webworker beziehen sich häufiger auf das Auslagern von Aufgaben (z. B. aufwendige Berechnungen) in einen sekundären Thread, um die Blockierung der Benutzeroberfläche zu vermeiden.

• Beispiel:Das Team, das das Videospiel PROXX entwickelt hat, wollte den Haupt-Thread so kostenlos wie möglich lassen, um sich um Nutzereingaben und Animationen zu kümmern. Dazu haben sie Webworker verwendet, um die Spiellogik und die Zustandsverwaltung in einem separaten Thread auszuführen.

Service Worker-Aufgaben haben im Allgemeinen eher mit der Funktion als Netzwerkproxy, der Verarbeitung von Hintergrundaufgaben und Dingen wie Caching und Offline zu tun.

Beispiel:In einer Podcast-PWA können Sie Nutzern erlauben, vollständige Folgen herunterzuladen, um sie offline anzuhören. Dazu können Sie einen Dienst-Worker und insbesondere die Background Fetch API verwenden. Wenn der Nutzer den Tab schließt, während die Folge heruntergeladen wird, muss der Vorgang nicht unterbrochen werden.

Tools und Bibliotheken

Die Kommunikation zwischen Fenstern und Workern kann mithilfe verschiedener APIs der unteren Ebene implementiert werden. Glücklicherweise gibt es Bibliotheken, die diesen Prozess abstrahieren und die häufigsten Anwendungsfälle abdecken. In diesem Abschnitt werden zwei davon behandelt, die sich um Window-to-Web-Worker und Service Worker kümmern: Comlink und Workbox.

Comlink

Comlink ist eine kleine (1,6 KB) RPC-Bibliothek, die viele zugrunde liegende Details beim Erstellen von Websites mit Webworkern übernimmt. Es wurde auf Websites wie PROXX und Squoosh verwendet. Eine Zusammenfassung der Motivationen und Codebeispiele finden Sie hier.

Workbox

Workbox ist eine beliebte Bibliothek zum Erstellen von Websites mit Service Workern. Es enthält eine Reihe von Best Practices zu Themen wie Caching, Offlinezugriff und Hintergrundsynchronisierung. Das workbox-window-Modul bietet eine praktische Möglichkeit, Nachrichten zwischen dem Service Worker und der Seite auszutauschen.

Nächste Schritte

Im Rest dieser Reihe liegt der Schwerpunkt auf Mustern für die Kommunikation zwischen Fenstern und Dienstarbeitern:

• Imperatives Caching: Ein Service Worker wird von der Seite aufgerufen, um Ressourcen im Voraus im Cache zu speichern (z.B. in Prefetching-Szenarien).
• Updates übertragen: Die Seite wird vom Service Worker aufgerufen, um über wichtige Updates zu informieren, z.B. dass eine neue Version der Website verfügbar ist.
• Zwei-Wege-Kommunikation: Sie können eine Aufgabe an einen Dienst-Worker delegieren (z.B. einen umfangreichen Download) und die Seite über den Fortschritt informieren.

Muster für die Kommunikation zwischen Fenstern und Webworkern finden Sie unter Webworker verwenden, um JavaScript außerhalb des Hauptthreads des Browsers auszuführen.