Diese Seite wurde von der Cloud Translation API übersetzt.

Service Worker zum Verwalten von Benachrichtigungen verwenden

Kate Jeffreys

In diesem Codelab nutzen Sie einen Service Worker um Benachrichtigungen zu verwalten. In dieser Anleitung wird vorausgesetzt, dass Sie bereits mit Service Workern und die Grundlagen zum Anfordern von Benachrichtigungsberechtigungen und zum Senden von Benachrichtigungen erläutert. Eine Auffrischung zu Benachrichtigungen findest du in der Erste Schritte mit der Notifications API Codelab. Weitere Informationen zu Service Workern finden Sie in der Einführung in Service Worker von Matt Gaunt.

Beispiel-App neu zusammenstellen und in einem neuen 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 wie folgt vor:

Klicke auf Zum Bearbeiten Remix, damit das Projekt bearbeitet werden kann.
Wenn Sie sich eine Vorschau der Website ansehen möchten, klicken Sie auf App ansehen. Drücken Sie dann Vollbild

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

Während du dieses Codelab durcharbeitest, kannst du den Code im eingebetteten Glitch auf dieser Seite ändern. 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:

Drücken Sie „Strg + Umschalttaste + J“ (oder „Befehlstaste + Option + J“ auf einem Mac), um die Entwicklertools zu öffnen.
Klicken Sie auf den Tab Console.
Im Drop-down-Menü Pegel muss die Option Info ausgewählt sein. neben dem Feld Filter.
In der Entwicklertools-Konsole für Ihre Live-Anwendung sollte die folgende Konsolenmeldung 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 im eingebetteten Glitch auf dieser Seite an.

Sieh dir im eingebetteten Glitch public/index.js an:
- Es gibt vier Stubs für die Funktionen, die Sie implementieren: registerServiceWorker, getRegistration, unRegisterServiceWorker und sendNotification.
- Die Funktion requestPermission 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 geklärt 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 Skript wartet, bis die Seite geladen ist, und initialisiert sie dann.
Öffne im eingebetteten Glitch public/service-worker.js.

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

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 Code in public/service-worker.js ein, um Benachrichtigungen zu verarbeiten, wenn sie vom Service Worker empfangen werden.

Service Worker registrieren

In diesem Schritt schreiben Sie Code, der Der Nutzer klickt in der App-UI auf Service Worker registrieren. Mit diesem Code wird public/service-worker.js als Service Worker registriert.

Öffnen Sie 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();
}
```
Beachte, dass registerServiceWorker die async function-Deklaration verwendet, um die Verarbeitung von Versprechen einfacher zu gestalten. Damit können Sie den aufgelösten Wert von Promise await. Die obige Funktion wartet beispielsweise auf das Ergebnis der Registrierung eines Service Workers, bevor die UI aktualisiert wird. Weitere Informationen findest du unter await auf MDN.
Nachdem der Nutzer einen Service Worker registriert hat, können Sie einen Verweis auf das 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();
}
```
Die obige Funktion verwendet den Service Worker API 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 zum Aufheben der Registrierung des Service Workers hinzu, um die Service Worker-Registrierungsfunktion zu beenden. 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 Registrierung des Service Workers aufheben sollten jetzt funktionieren.

Benachrichtigungen an 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. Außerdem wird geprüft, ob ein Service Worker registriert ist. Anschließend wird die Benachrichtigung mithilfe der Methode postMessage an den Service Worker gesendet.

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

Dieser Code bewirkt Folgendes:

sendNotification ist eine asynchrone Funktion. Sie können also mit await einen Verweis auf die Service Worker-Registrierung abrufen.
Mit der Methode postMessage des Service Workers werden Daten von der Anwendung an den Service Worker gesendet. Weitere Informationen finden Sie in der MDN-Dokumentation zu postMessage.
Der Code prüft, ob das Attribut 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 Aktualisierung der 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.

Öffnen Sie 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.
Während der Service Worker nun für die Anzeige von Benachrichtigungen zuständig ist, ist die Hauptbenutzeroberfläche der App weiterhin dafür zuständig, Benachrichtigungsberechtigungen vom Nutzer zu erhalten. Wenn die Berechtigung nicht gewährt wird, wird das von showNotification zurückgegebene Promise abgelehnt. Der obige Code verwendet einen catch-Block, um einen nicht abgefangenen Ablehnungsfehler vom Typ Promise zu vermeiden und diesen Fehler etwas angemessener 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.