Verwenden von Service Workern zum Verwalten von Netzwerkanforderungen und Pushbenachrichtigungen

Service Worker sind eine spezielle Art von Web worker mit der Möglichkeit, alle Netzwerkanforderungen mithilfe der API abzufangen, zu ändern und zu Fetch beantworten. Service Worker können auf die Cache API und asynchrone clientseitige Datenspeicher zugreifen, z. IndexedDB B. zum Speichern von Ressourcen.

Registrieren eines Service Worker

Ähnlich wie bei anderen Web-Workern müssen Service Worker in einer separaten Datei vorhanden sein. Sie verweisen auf diese Datei, wenn Sie den Service Worker registrieren, wie im folgenden Code gezeigt:

if ( "serviceWorker" in navigator ) {
    navigator.serviceWorker.register( "/serviceworker.min.js" );
}

Moderne Browser bieten unterschiedliche Stufen der Unterstützung für Service Worker. Daher empfiehlt es sich, das Vorhandensein des Objekts zu testen, bevor Sie serviceWorker Dienstmitarbeiter-bezogenen Code ausführen. Im obigen Code wird ein Service Worker mithilfe der Datei registriert, serviceworker.min.js die sich im Stammverzeichnis der Website befindet.

Stellen Sie sicher, dass Sie die Service Worker-Datei im Verzeichnis auf oberster Ebene platzieren, das sie verwalten soll. Ein solches Verzeichnis wird als Bereich des Service Worker bezeichnet. Im vorherigen Code wird die Datei im Stammverzeichnis gespeichert, und der Service Worker verwaltet alle Seiten in der Domäne.

Wenn die Service Worker-Datei in einem Verzeichnis gespeichert js wurde, wäre der Bereich des Service Worker das js Verzeichnis und alle Unterverzeichnisse. Als bewährte Methode platzieren Sie die Service Worker-Datei im Stammverzeichnis Ihrer Website, es sei denn, Sie müssen den Umfang Ihres Service Worker reduzieren.

Der Service Worker-Lebenszyklus

Der Lebenszyklus eines Service Worker besteht aus mehreren Schritten, wobei jeder Schritt ein Ereignis auslöst. Sie können listeners zu diesen Ereignissen hinzufügen, um Code zum Ausführen einer Aktion auszuführen. Die folgende Liste enthält eine allgemeine Übersicht über den Lebenszyklus und verwandte Ereignisse von Service Workern.

  1. Registrieren Sie den Service Worker.

  2. Der Browser lädt die JavaScript-Datei herunter, installiert den Service Worker und löst das install Ereignis aus. Sie können das install Ereignis verwenden, um wichtige und langlebige Dateien wie CSS-Dateien, JavaScript-Dateien, Logobilder, Offlineseiten usw. von Ihrer Website vorab zwischenzuspeichern.

    self.addEventListener( "install", function( event ){
        console.log( "WORKER: install event in progress." );
    });
    
  3. Der Service Worker wird aktiviert, wodurch das Ereignis ausgelöst activate wird. Verwenden Sie dieses Ereignis, um veraltete Caches zu bereinigen.

    self.addEventListener( "activate", event => {
        console.log('WORKER: activate event in progress.');
    });
    
  4. Der Service Worker kann ausgeführt werden, wenn die Seite aktualisiert wird oder wenn der Benutzer zu einer neuen Seite auf der Website wechselt. Wenn Sie den Service Worker ausführen möchten, ohne zu warten, verwenden Sie die self.skipWaiting() Methode während des install Ereignisses wie folgt:

    self.addEventListener( "install", event => {
        self.skipWaiting();
        // …
    });
    
  5. Der Service Worker wird jetzt ausgeführt.

Verwenden des Abrufs in Service Workern

Das Hauptereignis, das Sie in einem Service Worker verwenden, ist das fetch Ereignis. Das fetch Ereignis wird jedes Mal ausgeführt, wenn der Browser versucht, auf Inhalte im Bereich des Service Worker zuzugreifen.

Der folgende Code zeigt, wie Sie dem Fetch-Ereignis einen Listener hinzufügen:

self.addEventListener( "fetch", event => {
  console.log('WORKER: Fetching', event.request);
});

Innerhalb des fetch Handlers können Sie steuern, ob eine Anforderung an das Netzwerk gesendet wird, aus dem Cache abgerufen wird usw. Der Ansatz, den Sie verwenden, variiert wahrscheinlich je nach Art der angeforderten Ressource, der Anzahl der Aktualisierungen und anderer Geschäftslogik, die für Ihre Anwendung eindeutig ist.

Hier sind einige Beispiele dafür, was Sie innerhalb des Handlers tun fetch können:

  • Wenn verfügbar, geben Sie eine Antwort aus dem Cache zurück. andernfalls Fallback zum Anfordern der Ressource über das Netzwerk.
  • Rufen Sie eine Ressource aus dem Netzwerk ab, speichern Sie eine Kopie zwischen, und geben Sie die Antwort zurück.
  • Zulassen, dass Benutzer eine Einstellung zum Speichern von Daten angeben.
  • Geben Sie ein Platzhalterbild für bestimmte Bildanforderungen an.
  • Generieren Sie eine Antwort direkt im Service Worker.

Pushbenachrichtigungen

Service Worker können Benachrichtigungen an Benutzer senden. Pushbenachrichtigungen können Benutzer auffordern, sich nach Ablauf der Zeit erneut mit Ihrer Anwendung zu beschäftigen. Weitere Informationen finden Sie unter "Erneutes Einbinden von Benutzern mit Signalen, Benachrichtigungen und Pushnachrichten".

Weitere Informationen