Nutzer erwarten, dass Anwendungen bei langsamen oder unzuverlässigen Netzwerkverbindungen oder sogar offline zuverlässig 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, erwartet sie, dass die App sie darüber informiert, anstatt ohne Meldung auszusetzen oder abzustürzen. Und sie möchten, dass all dies schnell geschieht. Wie Sie in Millisekunden machen Millionen erkennen können, kann eine Verbesserung der Ladezeit um 0,1 Sekunden die Conversion-Rate um bis zu 10 % steigern. Mit Service Workern kann Ihre progressive Web-App (PWA) die Erwartungen Ihrer Nutzer erfüllen.
Wenn eine Anwendung eine Ressource anfordert, die vom Bereich des Service Workers abgedeckt ist, fängt der Service Worker die Anfrage ab und fungiert als Netzwerkproxy, auch wenn der Nutzer offline ist. Es kann dann entscheiden, ob die Ressource mithilfe der Cache Storage API aus dem Cache bereitgestellt, aus dem Netzwerk bereitgestellt oder über einen lokalen Algorithmus erstellt werden soll, als gäbe es keinen aktiven Service Worker. So können Sie Nutzern eine hochwertige Nutzererfahrung bieten, ähnlich wie bei einer Plattform-App, selbst wenn Ihre App offline ist.
Service Worker registrieren
Bevor ein Service Worker die Kontrolle über Ihre Seite übernimmt, muss sie für Ihre PWA registriert werden. Wenn ein Nutzer Ihre PWA zum ersten Mal öffnet, werden alle Netzwerkanfragen also direkt an Ihren Server gesendet, da der Service Worker noch keine Kontrolle über Ihre Seiten hat.
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 die Verbindung zwischen Ihrer PWA und dem Netzwerk ein. Er 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):
- Öffnen Sie die Entwicklertools und klicken Sie dann auf den Tab Anwendung.
- Wählen Sie im linken Bereich Service Workers aus.
- Prüfen Sie, ob die Skript-URL des Service Workers mit dem Status „Aktiviert“ angezeigt wird. Weitere Informationen finden Sie unter Lebenszyklus. In Firefox kann der Status „Wird ausgeführt“ oder „Angehalten“ sein.
In Safari:
- Klicken Sie auf Develop > Service Workers.
- Suchen Sie in diesem Menü nach einem Eintrag mit dem aktuellen Ursprung. Wenn Sie auf diesen Eintrag klicken, wird ein Inspector für den Kontext des Service Workers geöffnet.
Bereich
Der Ordner, in dem sich Ihr Service Worker befindet, bestimmt den Bereich. Ein Service Worker, der sich unter example.com/my-pwa/sw.js befindet, kann jede Navigation auf dem oder unter dem Pfad my-pwa steuern, z. B. example.com/my-pwa/demos/. Service Worker können nur Elemente (Seiten, Worker, zusammenfassend „Clients“) in ihrem Geltungsbereich steuern.
Dieser Bereich gilt für Browsertabs und PWA-Fenster.
Pro Bereich ist nur ein Service Worker zulässig. Wenn ein Service Worker aktiv ist und ausgeführt wird, ist in der Regel nur eine Instanz verfügbar, unabhängig davon, wie viele Clients (PWA-Fenster oder Browsertabs) sich im Arbeitsspeicher befinden.
Safari hat eine komplexere Bereichsverwaltung, die als Partitionen bezeichnet wird und sich darauf auswirkt, wie Bereiche mit domainübergreifenden iFrames funktionieren. Weitere Informationen zur Implementierung von WebKit finden Sie in diesem Blogpost.
Lifecycle
Service Worker haben einen Lebenszyklus, der unabhängig von Ihrer PWA-Installation bestimmt, wie sie installiert werden.
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 install-Ereignis des Service Workers ausgelöst. Das Ereignis install 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 auch auf Plattformen verfügbar, die keine PWA-Installation unterstützen, z. B. Safari und Firefox auf Desktop-Geräten.
Nach der Installation muss der Service Worker aktiviert werden, bevor er seine Clients, einschließlich Ihrer PWA, steuern kann. Wenn der Service Worker bereit ist, seine Clients zu steuern, wird das Ereignis activate ausgelöst. Standardmäßig kann ein aktivierter Service Worker die Seite, über die er registriert wurde, jedoch erst verwalten, wenn Sie die Seite das nächste Mal aufrufen, indem Sie sie neu laden oder die PWA noch einmal öffnen.
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 Service Worker, der den Client steuert, und die neue Version der Service Worker-Datei vom Server in Byte unterschiedlich sind.
Nach einer erfolgreichen Installation wartet der neue Service Worker mit der Aktivierung, bis der 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 mit dem aktuellen Service Worker alle Tabs und Fenster schließen oder diese verlassen und dem neuen Service Worker die Kontrolle darüber geben. Weitere Informationen finden Sie unter Service Worker-Lebenszyklus.
Service Worker-Lebensdauer
Ein installierter und registrierter Service Worker kann alle Netzwerkanfragen innerhalb seines Bereichs verwalten. Sie wird in einem eigenen Thread ausgeführt, wobei Aktivierung und Beendigung vom Browser gesteuert werden. So funktioniert die Anwendung noch, bevor Ihre PWA geöffnet ist oder nachdem sie geschlossen wurde. Service Worker werden in ihrem eigenen Thread ausgeführt, aber der Status im Arbeitsspeicher bleibt zwischen den Ausführungen eines Service Workers möglicherweise nicht bestehen. Achten Sie also darauf, dass alles, was Sie für jede Ausführung wiederverwenden möchten, entweder in IndexedDB oder in einem anderen nichtflüchtigen Speicher verfügbar ist.
Wird er noch nicht ausgeführt, wird ein Service Worker gestartet, wenn eine Netzwerkanfrage im Bereich gesendet wird oder wenn ein auslösendes Ereignis wie eine regelmäßige Hintergrundsynchronisierung oder eine Push-Nachricht empfangen wird.
Service Worker werden beendet, wenn sie einige Sekunden lang inaktiv waren oder zu lange beschäftigt sind. Die Dauer hierfür variiert je nach Browser. Wenn ein Service Worker beendet wurde und ein Ereignis auftritt, durch den er gestartet werden würde, wird er neu gestartet.
Leistungsspektrum
Ein registrierter und aktiver Service Worker verwendet einen Thread mit einem völlig anderen Ausführungslebenszyklus als dem des Hauptthreads Ihrer PWA. Standardmäßig verhält sich die Service Worker-Datei selbst jedoch nicht. Er speichert keine Ressourcen im Cache und stellt keine Ressourcen bereit. Das sind Dinge, die Ihr Code tun muss. In den folgenden Kapiteln erfahren Sie, wie das geht.
Die Funktionen von Service Workern gelten nicht nur für die Proxy-Bereitstellung oder die Bereitstellung von HTTP-Anfragen. Darüber hinaus stehen weitere Funktionen für andere Zwecke zur Verfügung, z. B. die Ausführung von Code im Hintergrund, Web-Push-Benachrichtigungen und die Verarbeitung von Zahlungen. Diese Ergänzungen werden unter Funktionen erläutert.