PWA Service Worker für Dummies

Tatsache ist, dass Servicemitarbeiter in den kommenden Jahren eine wichtige Rolle spielen müssen, und je schneller Sie sich mit dieser neuen Technologie vertraut machen, desto besser können Sie sich auf diese neue Zukunft des Webs einstellen.

Um Ihnen dabei zu helfen, diese neue Technologie besser kennenzulernen, werden wir deshalb gemeinsam über Service Worker diskutieren – was es ist, was es ins Web bringt, wie wir uns besser auf diese neue Technologie vorbereiten können das Netz.

Was ist ein Servicemitarbeiter?

Definitionen

Service Worker wird allgemein als die Technologie angesehen, die PWAs erstellt oder bricht, und ist eine API, die unabhängig vom Browser ausgeführt wird und für das Abfangen des Netzwerks verantwortlich ist – und aus diesem Grund viele der Dinge tun kann, die zuvor im Web nicht möglich waren. Websites (normalerweise PWAs), die von Servicemitarbeitern gesteuert werden, können eine tiefere Integration mit dem verwendeten Gerät aufweisen und folglich mehr Hardwarefähigkeiten und App-ähnliche Funktionen in das Web bringen (z. B. Push-Benachrichtigungen, Hintergrundsynchronisierung und mehr).

Wie es funktioniert

Kurzgesagt. Service Worker ist im Wesentlichen eine ereignisbasierte Schicht zwischen dem Browser und dem Server, die ausgehende Netzwerkanfragen abfängt, modifiziert und verarbeitet:

Und da der Service Worker ereignisbasiert ist, reagiert und kommuniziert er nur über Ereignisse und verwendet Versprechungen, um mitzuteilen, wann eine Operation abgeschlossen ist. Alle Empfangen von Ereignissen (z. B. fetch und push ) sind jedoch nur möglich, wenn der Service Worker aktiv ist, was anzeigt, wann der Browser den Service Worker erkennt und registriert (und auch wenn der Service Worker selbst die Installation erfolgreich abgeschlossen hat) . Vereinfacht dargestellt ist dies der typische Lebenszyklus eines Servicemitarbeiters:

Beachten Sie auch alle diese verfügbaren Ereignisse in Service Worker:

Alle funktionalen Ereignisse ( fetch , sync und push ) sollten für Sie selbsterklärend sein, da sie die Ereignisse sind, die für fast alle progressiven Merkmale von PWA sorgen (z. B. Offline-Fähigkeiten, Hintergrundsynchronisierung, Push-Benachrichtigungen).

 Empfohlene Lektüre: Was ist PWA? Alles, was Sie über Progressive Web Apps wissen müssen

Einschränkungen für Servicemitarbeiter

Da dies ein Skript ist, das unabhängig vom Browser ausgeführt wird, gibt es einige Einschränkungen:

• HTTPS-Protokoll : Service Worker müssen auf HTTPS-basierten Websites ausgeführt werden

• Kein Zugriff auf localStorage , DOM und das Fenster.
• Eingeschränkter scope : Servicemitarbeiter können nur im scope des aktuellen Verzeichnisses (und Unterverzeichnissen) arbeiten, in dem sich service-worker.js befindet.
• Asynchron : Service Worker sind von Natur aus asynchron und verlassen sich daher auf Promise-basierte APIs.

Was Servicemitarbeiter für PWA bedeuten

Wie bereits erwähnt, ist der Service Worker das Rückgrat der PWA, ohne die viele der revolutionären Funktionen der PWA nicht möglich sind. Im Wesentlichen stellt der Servicemitarbeiter die Mittel bereit für:

Bessere Leistung

Die Leistung bei wiederholten Besuchen ist bei einer PWA deutlich besser, da die Servicemitarbeiter den Caching-Prozess enorm unterstützen. Im Vergleich zum typischen Web-Cache (HTTP-Cache), der in den meisten Websites verwendet wird, zeichnet sich PWA durch die Bereitstellung von Inhalten auch unter ungünstigen Netzwerkbedingungen aus:

Dies alles ist der Tatsache zu verdanken, dass Service Worker Entwicklern völlige Freiheit darüber geben, was und wie Caching genau durchgeführt wird. Um zu sehen, wie viel besser die Caching-Leistung von Servicemitarbeitern ist, empfehlen wir die aktuelle Studie von Google: Measuring the Real-world Performance Impact of Service Workers. Die Studie hat eine klare Methodik, die sich auf die Time-to-First-Paining als Metrik zur Bestimmung der Leistung von Servicemitarbeitern konzentriert.

Im Durchschnitt wurden Seiten etwas schneller geladen, wenn ein Servicemitarbeiter die Seite steuerte, als ohne einen Servicemitarbeiter, sowohl für neue als auch für wiederkehrende Besucher.

Philip Walton, Messung der realen Leistungsauswirkungen von Servicemitarbeitern

Offline-Zugriff

Nach der Registrierung speichern Servicemitarbeiter den erforderlichen Inhalt für Ihre PWA-Site und stellen ihn anschließend bereit. Dies macht PWA-basierte Websites effektiv offlinefähig, da Benutzer weiterhin mit der Website interagieren und alle zwischengespeicherten Inhalte sehen können.

Das soll nicht heißen, dass der Offline-Zugriff auch ein bisher im Web unbekanntes Feature ist – es war möglich , Benutzern ein Offline-Erlebnis im Web zu bieten, aber das Erlebnis war nicht optimal (siehe Application Cache is a Douchebag) und der Service Worker wurden erfunden, um die Nachteile von AppCache anzugehen (oder besser gesagt zu vermeiden).

 Empfohlene Lektüre: Wie Sie Ihre PWA offline arbeiten lassen

Native App-Funktionen

Servicemitarbeiter bieten nicht nur Offline-Zugriff und verbesserte Leistung, sondern dienen auch als Basis für mehr App-ähnliche Funktionen wie Push-Benachrichtigungen und Hintergrundsynchronisierung (und in naher Zukunft Geofencing und regelmäßige Synchronisierung). Die Push-Benachrichtigungsfunktion von PWA wird beispielsweise mithilfe von zwei APIs zusammengestellt: der Benachrichtigungs-API und der Push-API, die beide auf der Service Worker-API aufbauen.

Lebenszyklus eines Servicemitarbeiters

Die Lebensdauer eines Dienstes besteht aus drei Teilen: Registrierung, Installation und Aktivierung, auf die wir im Folgenden näher eingehen werden:

Anmeldung

Der erste Schritt, den wir tun müssen, ist die Registrierung des Servicemitarbeiters. Ohne diesen Schritt weiß der Browser nicht, wo sich Ihr Service Worker befindet, und macht es daher unmöglich, den Service Worker im Hintergrund zu installieren.
Wir können den Servicemitarbeiter mit dem folgenden Code registrieren:

 if('serviceWorker' im Navigator) {
    navigator.serviceWorker.register('./pwa-examples/simicart/sw.js', {Scope: './sw-scope/'})
.then((reg) => {
   // Anmeldung funktioniert
       console.log('Registrierung erfolgreich. Gültigkeitsbereich ist ' + reg.scope);
};

Der obige Code beginnt zunächst mit der Suche nach der Service-Worker-API im Browser und, wenn der Browser diese API unterstützt, registriert er einen neuen Service-Worker mit der Methode serviceworkerContainer.register() und gibt einen scope des Service-Workers an. Im obigen Code ist unser scope beispielsweise /pwa-examples/simicart/ , was bedeutet, dass unser Servicemitarbeiter nur für Seiten arbeiten würde, die mit /pwa-examples/simicart/ . Wir nennen diese Seiten „ kontrollierte Seiten “.

Installation

Da der Browser nun weiß, wo sich unser Service Worker befindet – und welchen Umfang er hat – versucht er, den Service Worker zu installieren. Sie können sich dafür entscheiden, während dieser Phase nichts zu tun, aber wir möchten dennoch darauf hinweisen, dass dies die Phase ist, in der der größte Teil des Caching-Prozesses stattfindet. Beispielsweise wird der Prozess des Cachings von Assets normalerweise so durchgeführt:

 const cacheName = 'site-cache-v1'
const AssetsToCache = [
    '/pwa-beispiele/',
    '/pwa-examples/index.html',
    '/pwa-examples/css/styles.css',
    '/pwa-examples/js/app.js',
]

self.addEventListener('install', ( event ) => {
    event.waitUntil(  
        caches.open(CacheName).then((Cache) => {
              cache.addAll(assetsToCache) zurückgeben;
        })
      );
});

Wie Sie im obigen Beispiel sehen können, verwenden wir die Cache-API, um unsere Assets zwischenzuspeichern, die wir später verwenden werden, um unsere PWA offlinefähig zu machen. Dieser Caching-Prozess findet während des Installationsereignisses statt.

Aktivierung

Nach der Installationsphase können wir nun den Service Worker aktivieren. Diese Aktivierungsphase erfolgt jedoch normalerweise nicht automatisch, und damit der Servicemitarbeiter die Seite aktivieren kann, müssen Sie sicherstellen, dass derzeit kein Servicemitarbeiter die Seiten steuert.

Alternativ können Sie den Aktivierungsprozess Ihres Servicemitarbeiters auch automatisieren, indem Sie die Methode skipWaiting() verwenden.

 const cacheName = 'site-cache-v1'
const AssetsToCache = [
    '/pwa-beispiele/',
    '/pwa-examples/index.html',
    '/pwa-examples/css/styles.css',
    '//pwa-examples/js/app.js',
]
self.addEventListener('install', ( event ) => {
    self.skipWaiting(); // Warten überspringen
    event.waitUntil(  
        caches.open(CacheName).then((Cache) => {
              cache.addAll(assetsToCache) zurückgeben;
        })
      );
});

Das Web braucht Servicemitarbeiter

An diesem Punkt sind wir uns alle einig, dass Service Worker fast ein eventueller Schritt ist, den das Web gehen muss. Benutzer verlangen zunehmend App-ähnliche Funktionen, und zusammen mit der Tatsache, dass PWA die Zukunft der Softwarebereitstellung wird, sieht es so aus, als hätte das Web in den kommenden Jahren viel Potenzial.

Für Magento-Händler, die die Storefront transformieren möchten, bieten wir eine kostengünstige und vollständige Headless-PWA-Lösung für Ihr Unternehmen.