Nutzer erwarten, dass Apps bei langsamen oder unzuverlässigen Netzwerkverbindungen zuverlässig starten. sogar offline. Sie erwarten die Inhalte, mit denen sie zuletzt interagiert haben, wie Medientracks oder Tickets und Reisepläne, um verfügbar und nutzbar zu sein. Wenn eine Anfrage nicht möglich ist, erwartet sie, dass sie sie von der App erhält. und stürzt ab. Und sie wollen, dass das alles schnell geschieht. Als sehen Sie: Millisekunden machen Millionen, Selbst eine Verkürzung der Ladezeiten um 0,1 Sekunden kann die Conversion-Rate um bis zu 10 % steigern. Mit Service Workern können Sie Ihre progressive Web-App (PWA) bis zu der Nutzer Erwartungen erfüllt.
<ph type="x-smartling-placeholder">
Wenn eine Anwendung eine Ressource anfordert, die vom Bereich des Service Workers abgedeckt wird, Der Service Worker fängt die Anfrage ab und agiert als Netzwerk-Proxy, selbst wenn der Nutzer ist offline. Er kann dann entscheiden, ob die Ressource vom Cache Storage API verwenden, stellen Sie ihn aus dem Netzwerk bereit, als gäbe es keine aktiven Service Worker arbeiten oder ihn aus einem lokalen Algorithmus erstellen. So können Sie eine qualitativ hochwertige Nutzererfahrung wie eine Plattform-App zu bieten, selbst wenn Ihre App ist offline.
Service Worker registrieren
Bevor ein Service Worker die Kontrolle über Ihre Seite übernimmt, muss sie für Ihre PWA. Wenn ein Nutzer Ihre PWA zum ersten Mal öffnet, werden also alle Anfragen direkt an Ihren Server gesendet, da der Service Worker die Kontrolle über Ihre Seiten.
Nachdem Sie geprüft haben, ob der Browser die Service Worker API unterstützt, kann Ihre PWA folgende Aktionen ausführen: Service Worker registrieren Nach dem Laden richtet sich der Service Worker selbst ein zwischen Ihrer PWA und dem Netzwerk, wodurch Anfragen abgefangen werden entsprechende Antworten.
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 Ihr bevorzugter 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.
- Überprüfen Sie, ob die Skript-URL des Service Workers mit dem Status angezeigt wird. „Aktiviert“. Weitere Informationen finden Sie unter Lebenszyklus. In Firefox: kann der Status „Wird ausgeführt“ oder „Angehalten“.
In Safari:
- Klicken Sie auf Develop > Service Worker.
- Suchen Sie in diesem Menü nach einem Eintrag mit dem aktuellen Ursprung. Wenn Sie auf diesen Eintrag klicken öffnet ein Prüftool für den Kontext des Service Workers.
Umfang
Der Ordner, in dem sich Ihr Service Worker befindet, bestimmt seinen Bereich. Service Worker
die sich unter example.com/my-pwa/sw.js befindet, können jede Navigation unter oder unter dem
my-pwa-Pfad, z. B. example.com/my-pwa/demos/. Service Worker können
nur Elemente (Seiten, Mitarbeiter, kollektiv "Kunden") in ihrem Umfang kontrollieren.
Dieser Bereich gilt für Browsertabs und PWA-Fenster.
Pro Bereich ist nur ein Service Worker zulässig. Wenn ein Service Worker aktiv ist ausgeführt wird, ist in der Regel nur eine Instanz verfügbar, unabhängig davon, wie viele Clients (PWA-Fenster oder Browsertabs) befinden sich im Arbeitsspeicher.
Safari hat eine komplexere Verwaltungsbereichsverwaltung, die als Partitionen bezeichnet wird. Sie wirkt sich darauf aus, Bereiche funktionieren mit domainübergreifenden iFrames. Um mehr über WebKits Informationen zur Implementierung finden Sie im entsprechenden Blogpost.
Lifecycle
Der Lebenszyklus von Service Workern bestimmt separat, wie sie installiert werden aus Ihrer PWA-Installation.
Der Lebenszyklus des Service Workers beginnt mit der Registrierung des Service Workers. Die
versucht der Browser, die Service Worker-Datei herunterzuladen und zu parsen. Beim Parsen
erfolgreich ist, wird das install-Ereignis des Service Workers 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 verfügbar auf Plattformen, die keine PWA-Installation unterstützen, wie Safari und Firefox auf Desktop-Geräten.
Nach der Installation muss der Service Worker aktiviert werden, bevor er
seine Clients zu steuern, einschließlich Ihrer PWA. Wenn der Service Worker bereit ist,
seine Clients steuern, wird das activate-Ereignis ausgelöst. Standardmäßig wird jedoch ein
aktivierter Service Worker kann die Seite, über die er registriert wurde, erst zum nächsten
wenn Sie sie neu laden oder die PWA noch einmal öffnen.
Mit self können Sie im globalen Bereich des Service Workers auf Ereignisse warten.
-Objekt enthält:
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 erkennt, dass der Service Worker steuern den Client und die neue Version der Service Worker-Datei vom unterscheiden sich von Byte.
Nach einer erfolgreichen Installation wartet der neue Service Worker mit der Aktivierung, bis kontrolliert der alte Service Worker keine Clients mehr. Dieser Status wird als So sorgt der Browser dafür, dass nur eine Version Ihrer Website Service Worker nicht gleichzeitig ausgeführt wird.
Wenn Sie eine Seite aktualisieren oder die PWA noch einmal öffnen, kann der neue Service Worker nicht Steuerung. Der Nutzer muss alle Tabs und Fenster mit dem aktuellen Service Worker und navigieren Sie dann zurück, um dem neuen Service Worker Steuerung. Weitere Informationen finden Sie unter Lebenszyklus des Service Workers.
Service Worker-Lebensdauer
Ein installierter und registrierter Service Worker kann alle Netzwerkanfragen verwalten im Rahmen des Geltungsbereichs liegen. Sie wird in einem eigenen Thread ausgeführt, mit Aktivierung und Beendigung. Dies wird vom Browser gesteuert, sodass er funktioniert, noch bevor die PWA geöffnet oder nachdem es geschlossen wurde. Service Worker werden in ihrem eigenen Thread ausgeführt, jedoch im Arbeitsspeicherzustand zwischen den Ausführungen eines Service Workers möglicherweise die Sie für jede Ausführung wiederverwenden möchten, sind entweder in IndexedDB oder in einer anderen nichtflüchtigem Speicher.
Bei jeder Netzwerkanfrage wird ein Service Worker gestartet, falls er noch nicht ausgeführt wird. gesendet wird, oder wenn ein auslösendes Ereignis empfangen wird, z. B. oder eine Push-Nachricht gesendet.
Service Worker werden beendet, wenn sie einige Sekunden lang inaktiv waren oder waren sie zu lange beschäftigt. Die Dauer hierfür ist je nach Browser unterschiedlich. Wenn ein Service Worker beendet wurde und ein Ereignis eintritt, das ihn starten würde, wird er neu gestartet.
Leistungsspektrum
Ein registrierter und aktiver Service Worker verwendet einen Thread mit einer völlig anderen Ausführungslebenszyklus aus dem Hauptthread Ihrer PWA. Standardmäßig enthält der Parameter Service Worker-Datei selbst weist kein Verhalten auf. Es werden keine Daten im Cache gespeichert oder Ressourcen was Ihr Code tun muss. Wie genau das geht, nächsten Kapiteln.
Die Funktionen des Service Workers dienen nicht nur der Proxy-Funktion oder der Bereitstellung von HTTP-Anfragen. Darüber hinaus sind weitere Funktionen für andere Zwecke verfügbar, z. B. Hintergrundfunktionen. Code-Ausführung, Push-Benachrichtigungen im Web und Verarbeitung von Zahlungen. Wir besprechen diese Ergänzungen unter Funktionen.