Haben Sie sich jemals gefragt, wie einige Websites scheinbar weiter funktionieren, selbst wenn Sie offline sind? Das Geheimnis ist einfach: Diese Websites haben Servicemitarbeiter.

Servicemitarbeiter sind die Schlüsseltechnologie hinter vielen der nativen App-ähnlichen Funktionen moderner Webanwendungen.

Was sind Servicemitarbeiter?

Servicemitarbeiter sind eine spezialisierte Art von JavaScript-Webworker. Ein Service Worker ist eine JavaScript-Datei, die ein bisschen wie ein Proxy-Server funktioniert. Es fängt ausgehende Netzwerkanfragen von Ihrer Anwendung ab, sodass Sie benutzerdefinierte Antworten erstellen können. Sie können dem Benutzer beispielsweise zwischengespeicherte Dateien bereitstellen, wenn er offline ist.

Mit Servicemitarbeitern können Sie Ihren Webanwendungen auch Funktionen wie Hintergrundsynchronisierung hinzufügen.

Warum Servicemitarbeiter?

Webentwickler versuchen schon lange, die Möglichkeiten ihrer Apps zu erweitern. Bevor Servicemitarbeiter auftauchten, konnten Sie verschiedene Lösungen verwenden, um dies zu ermöglichen. Besonders bemerkenswert war AppCache, das das Caching von Ressourcen bequem machte. Leider hatte es Probleme, die es für die meisten Apps zu einer unpraktischen Lösung machten.

instagram viewer

AppCache schien eine gute Idee zu sein, da Sie damit ganz einfach Assets angeben konnten, die zwischengespeichert werden sollten. Es machte jedoch viele Annahmen darüber, was Sie zu tun versuchten, und brach dann schrecklich zusammen, als Ihre App diesen Annahmen nicht genau folgte. Lesen Sie Jake Archibalds (leider betitelt, aber gut geschrieben) Application Cache ist ein Douchebag für mehr Details. (Quelle: MDN)

Servicemitarbeiter sind der aktuelle Versuch, die Einschränkungen von Web-Apps zu verringern, ohne die Nachteile von Technologien wie AppCache.

Anwendungsfälle für Servicemitarbeiter

Was genau lassen Sie also von Servicemitarbeitern tun? Mit Service Workern können Sie Ihrer Webanwendung Funktionen hinzufügen, die für native Apps charakteristisch sind. Sie können auch auf Geräten, die Servicemitarbeiter nicht unterstützen, ein normales Erlebnis bieten. Apps wie diese werden manchmal aufgerufen Progressive Web-Apps (PWAs).

Hier sind einige der Funktionen, die Servicemitarbeiter ermöglichen:

  • Der Benutzer kann die App (oder zumindest Teile davon) weiter verwenden, wenn er nicht mehr mit dem Internet verbunden ist. Service Worker erreichen dies, indem sie zwischengespeicherte Assets als Reaktion auf Anfragen bereitstellen.
  • In Chromium-basierten Browsern ist ein Servicemitarbeiter eine der Voraussetzungen, damit eine Web-App installierbar ist.
  • Damit Ihre Webanwendung Push-Benachrichtigungen implementieren kann, sind Servicemitarbeiter erforderlich.

Der Lebenszyklus eines Servicemitarbeiters

Servicemitarbeiter können Anfragen für eine ganze Website oder nur einen Teil der Seiten der Website kontrollieren. Eine bestimmte Webseite kann nur einen aktiven Servicemitarbeiter haben, und alle Servicemitarbeiter haben einen ereignisbasierten Lebenszyklus. Der Lebenszyklus eines Servicemitarbeiters sieht im Allgemeinen wie folgt aus:

  1. Registrierung und Download des Workers. Das Leben eines Servicemitarbeiters beginnt, wenn eine JavaScript-Datei ihn registriert. Wenn die Registrierung erfolgreich ist, lädt der Service Worker herunter und beginnt dann mit der Ausführung in einem speziellen Thread.
  2. Wenn eine vom Dienstmitarbeiter gesteuerte Seite geladen wird, empfängt der Dienstmitarbeiter ein 'install'-Ereignis. Dies ist immer das erste Ereignis, das ein Servicemitarbeiter erhält, und Sie können innerhalb des Mitarbeiters einen Listener für dieses Ereignis einrichten. Das „install“-Ereignis wird im Allgemeinen verwendet, um alle Ressourcen abzurufen und/oder zwischenzuspeichern, die der Servicemitarbeiter benötigt.
  3. Nachdem der Service Worker die Installation abgeschlossen hat, erhält er ein „activate“-Ereignis. Dieses Ereignis ermöglicht es dem Mitarbeiter, redundante Ressourcen zu bereinigen, die von vorherigen Servicemitarbeitern verwendet wurden. Wenn Sie einen Servicemitarbeiter aktualisieren, wird das Aktivierungsereignis nur ausgelöst, wenn dies gefahrlos möglich ist. Dies ist der Fall, wenn keine geladenen Seiten mehr die alte Version des Service Workers verwenden.
  4. Danach hat der Servicemitarbeiter die volle Kontrolle über alle Seiten, die nach erfolgreicher Registrierung geladen wurden.
  5. Die letzte Phase des Lebenszyklus ist die Redundanz, die auftritt, wenn der Service Worker entfernt oder durch eine neuere Version ersetzt wird.

So verwenden Sie Service Worker in JavaScript

Die Service Worker-API (MDN) stellt die Schnittstelle bereit, mit der Sie Servicemitarbeiter in JavaScript erstellen und mit ihnen interagieren können.

Service Worker befassen sich hauptsächlich mit Netzwerkanfragen und anderen asynchronen Ereignissen. Infolgedessen wird die Service-Worker-API stark genutzt Promises und asynchrone Programmierung.

Um einen Servicemitarbeiter anzulegen, müssen Sie zunächst die anrufen navigator.serviceWorker.register() Methode. So könnte das aussehen:

wenn ('serviceWorker' im Navigator) {
 navigator.serviceWorker.register('/sw.js').then(Funktion(Anmeldung){
 Konsole.log ('Registrierung des Servicemitarbeiters erfolgreich:', Anmeldung);
 }).catch((Fehler) => { Konsole.log ('Registrierung des Servicemitarbeiters fehlgeschlagen:', Error); });
} anders {
 Konsole.log ('Servicemitarbeiter werden nicht unterstützt.');
}

Der äußerste if-Block führt die Merkmalserkennung durch. Es stellt sicher, dass Servicemitarbeiter-bezogener Code nur auf Browsern ausgeführt wird, die Servicemitarbeiter unterstützen.

Als Nächstes ruft der Code die registrieren Methode. Es übergibt den Pfad an den Dienstmitarbeiter (relativ zum Ursprung der Site), um ihn zu registrieren und herunterzuladen. Das registrieren -Methode akzeptiert auch einen optionalen Parameter namens Bereich, der verwendet werden kann, um die vom Worker kontrollierten Seiten einzuschränken. Service Worker kontrollieren standardmäßig alle Seiten einer Anwendung. Das registrieren -Methode gibt ein Promise zurück, das angibt, ob die Registrierung erfolgreich war.

Wenn das Promise aufgelöst wird, hat sich der Servicemitarbeiter erfolgreich registriert. Der Code gibt dann ein Objekt aus, das den registrierten Servicemitarbeiter auf der Konsole darstellt.

Wenn der Registrierungsprozess fehlschlägt, fängt der Code den Fehler ab und protokolliert ihn in der Konsole.

Als nächstes ist hier ein vereinfachtes Beispiel dafür, wie der Servicemitarbeiter selbst aussehen könnte:

self.addEventListener('Installieren', (Ereignis) => {
 event.waitUntil(NeuVersprechen((auflösen, ablehnen) => {
 Konsole.log ("Setup-Sachen machen")
 beschließen()
 }))
 Konsole.log ("Der Servicemitarbeiter hat die Installation abgeschlossen")
})
self.addEventListener('aktivieren Sie', (Ereignis) => {
 event.waitUntil(NeuVersprechen((auflösen, ablehnen) => {
 Konsole.log ("macht Aufräumarbeiten!")
 beschließen()
 }))
 Konsole.log ('Aktivierung abgeschlossen!')
})
self.addEventListener('bringen', (Ereignis) => {
 Konsole.log ("Anfrage abgefangen", Veranstaltung)
});

Dieser Demodienstmitarbeiter hat drei Ereignis-Listener, die für sich selbst registriert sind. Es hat einen für das 'install'-Ereignis, das 'activate'-Ereignis und das 'fetch'-Ereignis.

Innerhalb der ersten beiden Listener verwendet der Code die warte bis Methode. Diese Methode akzeptiert ein Promise. Seine Aufgabe besteht darin, sicherzustellen, dass der Servicemitarbeiter auf die Lösung oder Ablehnung des Promise wartet, bevor er zum nächsten Ereignis übergeht.

Der Abruf-Listener wird immer dann ausgelöst, wenn eine Anforderung für eine Ressource gestellt wird, die der Service-Worker kontrolliert.

Die von einem Servicemitarbeiter kontrollierten Ressourcen umfassen alle Seiten, die er kontrolliert, sowie alle Assets, auf die auf diesen Seiten verwiesen wird.

Erweitern Sie Ihre Web-Apps mit Servicemitarbeitern

Service Worker sind eine besondere Art von Web Workern, die einem einzigartigen Zweck dienen. Sie sitzen vor Netzwerkanfragen, um Funktionen wie den Offline-App-Zugriff zu aktivieren. Der Einsatz von Servicemitarbeitern in einer Webanwendung kann die Benutzererfahrung erheblich verbessern. Mithilfe der Service-Worker-API können Sie Service-Worker erstellen und mit ihnen interagieren.