Service Worker zum Verwalten von Benachrichtigungen verwenden

Kate Jeffreys
Kate Jeffreys

In diesem Codelab verwenden Sie einen Service Worker, um Benachrichtigungen zu verwalten. In dieser Anleitung wird davon ausgegangen, dass Sie bereits mit Service Workern und den Grundlagen des Anforderns von Benachrichtigungsberechtigungen und des Sendens von Benachrichtigungen vertraut sind. Wenn Sie Ihr Wissen zu Benachrichtigungen auffrischen möchten, sehen Sie sich das Code-Lab zur Notifications API an. Weitere Informationen zu Service Workern finden Sie in Introduction to service workers von Matt Gaunt.

Mit der Beispiel-App und dem Startcode 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 Informationen ausgewählt ist.

  4. In der Entwicklertools-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.

Sehen wir uns nun den Code der Beispiel-App an.

  1. Sehen Sie sich public/index.js an:

    • Es gibt vier Stubs für die Funktionen, die Sie implementieren werden: 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 der Notifications API“ durchgearbeitet haben, werden Sie feststellen, dass die Funktion requestPermission hier verwendet wird. Der einzige Unterschied besteht darin, dass die Benutzeroberfläche jetzt auch nach dem Auflösen der Berechtigungsanfrage aktualisiert wird.

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

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

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

  2. Öffnen Sie public/service-worker.js.

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

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

    Sie fügen public/service-worker.js Code hinzu, um Benachrichtigungen zu verarbeiten, wenn der Service Worker sie empfängt.

Service Worker registrieren

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

  1. Öffnen Sie 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();
}

    registerServiceWorker verwendet die Deklaration async function, um die Verarbeitung von Promises zu vereinfachen. Damit können Sie den aufgelösten Wert eines Promise await. Die Funktion oben wartet beispielsweise auf das Ergebnis der Registrierung eines Service Workers, bevor die Benutzeroberfläche aktualisiert wird. Weitere Informationen finden Sie unter await auf MDN.

  2. Nachdem der Nutzer einen Service Worker registrieren kann, können Sie eine Referenz zum Service Worker-Registrierungsobjekt 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 Funktion oben wird die Service Worker API verwendet, um die aktuelle Service Worker-Registrierung abzurufen, sofern sie vorhanden ist. Dadurch wird es etwas einfacher, einen Verweis auf die Service Worker-Registrierung zu erhalten.

  • Fügen Sie Code hinzu, um den Service Worker abzumelden, damit die Service Worker-Registrierungsfunktion vollständig ist. 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();
}

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

Benachrichtigungen an den Service 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 Service Worker registriert ist, und die Benachrichtigung dann über die Methode postMessage an den Service Worker gesendet.

Öffnen Sie 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.');
    }
  }
}

Das macht der Code:

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

  • Mit der 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 er versucht, auf die Funktion postMessage zuzugreifen. navigator.serviceWorker.controller ist null, wenn kein aktiver Service Worker vorhanden ist oder die Seite mit Shift+Neu laden aktualisiert wurde. Weitere Informationen finden Sie in der Dokumentation zum ServiceWorker-Controller auf MDN.

Benachrichtigungen im Service Worker verarbeiten

In diesem Schritt schreiben Sie Code im Service Worker, der Nachrichten verarbeitet, die an ihn gesendet werden, und Benachrichtigungen für den Nutzer anzeigt.

Öffnen Sie 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 Service Worker ist jetzt zwar für die Anzeige von Benachrichtigungen zuständig, die Haupt-App-UI muss aber weiterhin die Benachrichtigungsberechtigung vom Nutzer einholen. Wenn die Berechtigung nicht erteilt wird, wird das von showNotification zurückgegebene Promise abgelehnt. Im obigen Code wird ein catch-Block verwendet, um einen nicht abgefangenen Promise-Ablehnungsfehler zu vermeiden und diesen Fehler etwas eleganter zu behandeln.

Fahren Sie mit dem nächsten Codelab in dieser Reihe fort: Push-Benachrichtigungsserver erstellen.