Service Worker zum Verwalten von Benachrichtigungen verwenden

Kate Jeffreys
Kate Jeffreys

In diesem Codelab verwenden Sie einen Dienst-Worker, um Benachrichtigungen zu verwalten. In dieser Anleitung wird davon ausgegangen, dass Sie mit Service Workers und den Grundlagen zum Anfordern der Berechtigung zum Senden von Benachrichtigungen vertraut sind. Wenn Sie noch einmal die Grundlagen zu Benachrichtigungen durchgehen möchten, sehen Sie sich das Codelab Erste Schritte mit der Notifications API an. Weitere Informationen zu Dienstmitarbeitern finden Sie in der Einführung in Dienstmitarbeiter von Matt Gaunt.

Beispiel-App remixen und in neuem Tab ansehen

Benachrichtigungen werden für die eingebettete Glitch App automatisch blockiert, sodass du auf dieser Seite keine Vorschau der App anzeigen kannst. Gehen Sie stattdessen so vor:

  1. Klicke auf Remix zum Bearbeiten, um das Projekt bearbeitbar zu machen.
  2. Wenn Sie sich eine Vorschau der Website ansehen möchten, drücken Sie App ansehen und dann Vollbild Vollbild.

Der Glitch sollte in einem neuen Chrome-Tab geöffnet werden.

Nehmen Sie während dieses Codelabs Änderungen am Code im eingebetteten Glitch auf dieser Seite vor. Aktualisieren Sie den neuen Tab mit Ihrer Live-App, um die Änderungen zu sehen.

Mit der Beispiel-App und dem Starten von Code vertraut machen

Sehen Sie sich zuerst die Live-App im neuen Chrome-Tab an:

  1. Drücken Sie Strg + Umschalttaste + J (oder Befehlstaste + Optionstaste + J auf einem Mac), um die Entwicklertools zu öffnen.
  2. Klicken Sie auf den Tab Console.

  3. Achten Sie darauf, dass im Drop-down-Menü Ebenen neben dem Feld Filter die Option Info ausgewählt ist.

  4. In der DevTools-Konsole für Ihre Live-App sollte eine Konsolennachricht angezeigt werden:

    TODO: Implement getRegistration().

    Dies ist eine Nachricht von einem Funktions-Stub, den Sie in diesem Codelab implementieren werden.

Sehen wir uns nun den Code der Beispiel-App im eingebetteten Glitch auf dieser Seite an.

  1. Sehen Sie sich in der eingebetteten Glitch-Anwendung public/index.js an:

    • Es gibt vier Stubs für die Funktionen, die Sie implementieren: registerServiceWorker, getRegistration, unRegisterServiceWorker und sendNotification.

    • Die requestPermission-Funktion fordert die Berechtigung des Nutzers zum Senden von Benachrichtigungen an. Wenn Sie das Codelab Erste Schritte mit dem Codelab der Notifications API ausgeführt haben, werden Sie feststellen, dass hier die Funktion requestPermission verwendet wird. Der einzige Unterschied besteht darin, dass jetzt auch die Benutzeroberfläche aktualisiert wird, nachdem die Berechtigungsanfrage behoben wurde.

    • Die Funktion updateUI aktualisiert alle Schaltflächen und Meldungen der App.

    • Die Funktion initializePage führt eine Funktionserkennung für Service Worker-Funktionen im Browser durch und aktualisiert die Benutzeroberfläche der App.

    • Das Script wartet, bis die Seite geladen wurde, und initialisiert sie dann.

  2. Öffne public/service-worker.js im eingebetteten Glitch.

    Wie der Name schon sagt, fügen Sie der App Code hinzu, um diese Datei als Dienst-Worker zu registrieren.

    Obwohl die Datei noch nicht von der Anwendung verwendet wird, enthält sie einen Startcode, der eine Meldung an die Konsole ausgibt, wenn der Service Worker aktiviert wird.

    Sie fügen public/service-worker.js Code hinzu, um Benachrichtigungen zu verarbeiten, die der Dienstarbeiter empfängt.

Service Worker registrieren

In diesem Schritt schreiben Sie Code, der ausgeführt wird, wenn der Nutzer in der App-Benutzeroberfläche auf Service Worker registrieren klickt. Mit diesem Code wird public/service-worker.js als Service Worker registriert.

  1. Öffne im eingebetteten Glitch-Editor public/index.js. Ersetzen Sie die Funktion registerServiceWorker durch den folgenden Code:

    // Use the Service Worker API to register a service worker.
    async
    function registerServiceWorker() {
      await navigator
    .serviceWorker.register('./service-worker.js')
      updateUI
    ();
    }

    Hinweis: In registerServiceWorker wird die Deklaration async function verwendet, um die Verwaltung von Versprechen zu vereinfachen. So können Sie den await des aufgelösten Werts eines Promise ermitteln. In der obigen Funktion wird beispielsweise auf das Ergebnis der Registrierung eines Service Workers gewartet, bevor die Benutzeroberfläche aktualisiert wird. Weitere Informationen finden Sie unter await auf MDN.

  2. Nachdem der Nutzer einen Dienst-Worker registriert hat, können Sie einen Verweis auf das Registrierungsobjekt des Dienst-Workers abrufen. Ersetzen Sie in public/index.js die Funktion getRegistration durch den folgenden Code:

    // Get the current service worker registration.
    function getRegistration() {
     
    return navigator.serviceWorker.getRegistration();
    }

    In der obigen Funktion wird die Service Worker API verwendet, um die aktuelle Service Worker-Registrierung abzurufen, falls vorhanden. Es macht das Abrufen eines Verweises auf die Service Worker-Registrierung etwas bequemer.

  • Fügen Sie Code hinzu, um den Service Worker abzumelden, um die Registrierungsfunktion des Service Workers abzuschließen. Ersetzen Sie die Funktion unRegisterServiceWorker durch den folgenden Code:

    // Unregister a service worker, then update the UI.
    async
    function unRegisterServiceWorker() {
     
    // Get a reference to the service worker registration.
      let registration
    = await getRegistration();
     
    // Await the outcome of the unregistration attempt
     
    // so that the UI update is not superceded by a
     
    // returning Promise.
      await registration
    .unregister();
      updateUI
    ();
    }

Aktualisieren Sie die Seite auf dem Tab, auf dem Sie sich die Live-App ansehen. Die Schaltflächen Service Worker registrieren und Service Worker abmelden sollten jetzt funktionieren.

Benachrichtigungen an den Dienst-Worker senden

In diesem Schritt schreiben Sie Code, der ausgeführt wird, wenn der Nutzer in der App-Benutzeroberfläche auf Benachrichtigung senden klickt. Mit diesem Code wird eine Benachrichtigung erstellt, geprüft, ob ein Dienstarbeiter registriert ist, und die Benachrichtigung dann über die Methode postMessage an den Dienstarbeiter gesendet.

Öffnen Sie im eingebetteten Glitch-Editor public/index.js und ersetzen Sie die Funktion sendNotification durch den folgenden Code:

// Create and send a test notification to the service worker.
async
function sendNotification() {
 
// Use a random number as part of the notification data
 
// (so you can tell the notifications apart during testing!)
  let randy
= Math.floor(Math.random() * 100);
  let notification
= {
    title
: 'Test ' + randy,
    options
: { body: 'Test body ' + randy }
 
};
 
// Get a reference to the service worker registration.
  let registration
= await getRegistration();
 
// Check that the service worker registration exists.
 
if (registration) {
   
// Check that a service worker controller exists before
   
// trying to access the postMessage method.
   
if (navigator.serviceWorker.controller) {
      navigator
.serviceWorker.controller.postMessage(notification);
   
} else {
      console
.log('No service worker controller found. Try a soft reload.');
   
}
 
}
}

Hier ist, was dieser Code tut:

  • sendNotification ist eine asynchrone Funktion. Sie können also await verwenden, um einen Verweis auf die Service Worker-Registrierung abzurufen.

  • Über die postMessage-Methode des Service Workers werden Daten von der App an den Service Worker gesendet. Weitere Informationen finden Sie in der MDN-Dokumentation zu postMessage.

  • Der Code prüft, ob die Property navigator.serviceWorker.controller vorhanden ist, bevor versucht wird, auf die Funktion postMessage zuzugreifen. navigator.serviceWorker.controller ist null, wenn kein aktiver Service Worker vorhanden ist oder die Seite erzwungen wurde (Shift+Aktualisieren). Weitere Informationen finden Sie in der Dokumentation zum ServiceWorker-Controller zu MDN.

Benachrichtigungen im Service Worker verarbeiten

In diesem Schritt schreiben Sie Code in den Service Worker, der die an ihn gesendeten Nachrichten verarbeitet und dem Nutzer Benachrichtigungen anzeigt.

Öffne im eingebetteten Glitch-Editor public/service-worker.js. Fügen Sie am Ende der Datei den folgenden Code ein:

// Show notification when received
self
.addEventListener('message', (event) => {
  let notification
= event.data;
  self
.registration.showNotification(
    notification
.title,
    notification
.options
 
).catch((error) => {
    console
.log(error);
 
});
});

Hier eine kurze Erklärung:

  • self ist ein Verweis auf den Service Worker selbst.

  • Der Dienst-Worker ist jetzt für die Anzeige von Benachrichtigungen zuständig, die Haupt-App-Benutzeroberfläche ist jedoch weiterhin dafür verantwortlich, die Berechtigung für Benachrichtigungen vom Nutzer einzuholen. Wenn die Berechtigung nicht gewährt wird, wird das von showNotification zurückgegebene Versprechen abgelehnt. Im Code oben wird ein catch-Block verwendet, um einen nicht abgefangenen Promise-Ablehnungsfehler zu vermeiden und diesen Fehler etwas eleganter zu behandeln.

Wenn Sie nicht weiterkommen, finden Sie den vollständigen Code unter glitch.com/edit/#!/codelab-notifications-service-worker-completed.

Fahren Sie mit dem nächsten Codelab in dieser Reihe fort: Server für Push-Benachrichtigungen erstellen.