Codelab: Client für Push-Benachrichtigungen erstellen

Kate Jeffreys
Kate Jeffreys
Kayce Basques
Kayce Basques
X GitHub

In diesem Codelab erfahren Sie Schritt für Schritt, wie Sie einen Push-Benachrichtigungsclient erstellen. Am Ende des Codelabs haben Sie einen Client, der:

  • Abonniert Push-Benachrichtigungen für den Nutzer.
  • Empfängt Push-Nachrichten und zeigt sie als Benachrichtigungen an.
  • Meldet den Nutzer von Push-Benachrichtigungen ab.

In diesem Codelab geht es darum, dass Sie durch praktische Übungen lernen. Konzepte werden nur wenig behandelt. Weitere Informationen zu Push-Benachrichtigungen finden Sie unter Wie funktionieren Push-Benachrichtigungen?.

Der Servercode dieses Codelabs ist bereits vollständig. In diesem Codelab implementieren Sie nur den Client. Informationen zum Implementieren eines Push-Benachrichtigungsservers finden Sie im Codelab: Build a push notification server.

Browserkompatibilität

Dieses Codelab funktioniert mit den folgenden Kombinationen aus Betriebssystem und Browser:

  • Windows: Chrome, Edge
  • macOS: Chrome, Firefox
  • Android: Chrome, Firefox

Dieses Codelab funktioniert nicht mit den folgenden Betriebssystemen (oder Betriebssystem- und Browserkombinationen):

  • macOS: Brave, Edge, Safari
  • iOS

Einrichtung

Bearbeitbare Kopie des Codes erhalten

  • Klicken Sie auf Remix to Edit (Remixen, um zu bearbeiten), damit das Projekt bearbeitet werden kann.

Authentifizierung einrichten

Bevor Push-Benachrichtigungen funktionieren, müssen Sie Ihren Server und Client mit Authentifizierungsschlüsseln einrichten. Weitere Informationen finden Sie unter Web-Push-Protokollanfragen signieren. Normalerweise speichern Sie Secrets in einer .env-Datei, wie im Folgenden dargestellt.

VAPID_PUBLIC_KEY="BKiwTvD9HA…"
VAPID_PRIVATE_KEY="4mXG9jBUaU…"
VAPID_SUBJECT="mailto:test@test.test"
  • Öffnen Sie public/index.js.
  • Ersetzen Sie VAPID_PUBLIC_KEY_VALUE_HERE durch den Wert Ihres öffentlichen Schlüssels.

Service Worker registrieren

Ihr Kunde benötigt letztendlich einen Service Worker, um Benachrichtigungen zu empfangen und anzuzeigen. Registrieren Sie den Service Worker am besten so früh wie möglich. Weitere Informationen finden Sie unter Push-Nachrichten als Benachrichtigungen empfangen und anzeigen.

  • Ersetzen Sie den Kommentar // TODO add startup logic here durch den folgenden Code:
// TODO add startup logic here
if ('serviceWorker' in navigator && 'PushManager' in window) {
  navigator.serviceWorker.register('./service-worker.js').then(serviceWorkerRegistration => {
    console.info('Service worker was registered.');
    console.info({serviceWorkerRegistration});
  }).catch(error => {
    console.error('An error occurred while registering the service worker.');
    console.error(error);
  });
  subscribeButton.disabled = false;
} else {
  console.error('Browser does not support service workers or push messages.');
}

subscribeButton.addEventListener('click', subscribeButtonHandler);
unsubscribeButton.addEventListener('click', unsubscribeButtonHandler);
  • Drücken Sie „Strg + Umschalttaste + J“ (oder „Befehlstaste + Optionstaste + J“ auf einem Mac), um die Entwicklertools zu öffnen.
  • Klicken Sie auf den Tab Console. Die Meldung Service worker was registered. sollte in der Konsole protokolliert werden.

Berechtigung für Push-Benachrichtigungen anfordern

Sie sollten niemals beim Seitenaufbau die Berechtigung zum Senden von Push-Benachrichtigungen anfordern. Stattdessen sollte der Nutzer in der Benutzeroberfläche gefragt werden, ob er Push-Benachrichtigungen erhalten möchte. Sobald der Nutzer dies explizit bestätigt hat (z. B. durch Klicken auf eine Schaltfläche), können Sie den formalen Prozess zum Einholen der Berechtigung für Push-Benachrichtigungen vom Browser starten.

  • Ersetzen Sie in public/index.js den Kommentar // TODO in subscribeButtonHandler() durch den folgenden Code:
// TODO
// Prevent the user from clicking the subscribe button multiple times.
subscribeButton.disabled = true;
const result = await Notification.requestPermission();
if (result === 'denied') {
  console.error('The user explicitly denied the permission request.');
  return;
}
if (result === 'granted') {
  console.info('The user accepted the permission request.');
}
  • Kehren Sie zum App-Tab zurück und klicken Sie auf Push-Benachrichtigungen abonnieren. Ihr Browser oder Betriebssystem fragt Sie wahrscheinlich, ob Sie der Website erlauben möchten, Ihnen Push-Benachrichtigungen zu senden. Klicken Sie auf Zulassen (oder die entsprechende Formulierung in Ihrem Browser/Betriebssystem). In der Konsole sollte eine Meldung angezeigt werden, aus der hervorgeht, ob die Anfrage akzeptiert oder abgelehnt wurde.

Push-Benachrichtigungen abonnieren

Beim Abonnieren interagieren Sie mit einem Webdienst, der vom Browseranbieter gesteuert wird und als Push-Dienst bezeichnet wird. Sobald Sie die Informationen zum Push-Benachrichtigungsabo erhalten haben, müssen Sie sie an einen Server senden und dort langfristig in einer Datenbank speichern. Weitere Informationen zum Abo-Prozess finden Sie unter Client für Push-Benachrichtigungen abonnieren.

  • Fügen Sie den folgenden hervorgehobenen Code zu subscribeButtonHandler() hinzu:
subscribeButton.disabled = true;
const result = await Notification.requestPermission();
if (result === 'denied') {
  console.error('The user explicitly denied the permission request.');
  return;
}
if (result === 'granted') {
  console.info('The user accepted the permission request.');
}
const registration = await navigator.serviceWorker.getRegistration();
const subscribed = await registration.pushManager.getSubscription();
if (subscribed) {
  console.info('User is already subscribed.');
  notifyMeButton.disabled = false;
  unsubscribeButton.disabled = false;
  return;
}
const subscription = await registration.pushManager.subscribe({
  userVisibleOnly: true,
  applicationServerKey: urlB64ToUint8Array(VAPID_PUBLIC_KEY)
});
notifyMeButton.disabled = false;
fetch('/add-subscription', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(subscription)
});

Die Option userVisibleOnly muss true sein. Es kann sein, dass es eines Tages möglich sein wird, Nachrichten zu senden, ohne dass für Nutzer sichtbare Benachrichtigungen angezeigt werden (stille Push-Benachrichtigungen). Derzeit ist das in Browsern jedoch aus Datenschutzgründen nicht möglich.

Der applicationServerKey-Wert basiert auf einer Hilfsfunktion, die einen Base64-String in ein Uint8Array konvertiert. Dieser Wert wird für die Authentifizierung zwischen Ihrem Server und dem Push-Dienst verwendet.

Push-Benachrichtigungen abbestellen

Nachdem ein Nutzer Push-Benachrichtigungen abonniert hat, muss Ihre Benutzeroberfläche eine Möglichkeit zum Abbestellen bieten, falls der Nutzer seine Meinung ändert und keine Push-Benachrichtigungen mehr erhalten möchte.

  • Ersetzen Sie den Kommentar // TODO in unsubscribeButtonHandler() durch den folgenden Code:
// TODO
const registration = await navigator.serviceWorker.getRegistration();
const subscription = await registration.pushManager.getSubscription();
fetch('/remove-subscription', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({endpoint: subscription.endpoint})
});
const unsubscribed = await subscription.unsubscribe();
if (unsubscribed) {
  console.info('Successfully unsubscribed from push notifications.');
  unsubscribeButton.disabled = true;
  subscribeButton.disabled = false;
  notifyMeButton.disabled = true;
}

Push-Nachricht empfangen und als Benachrichtigung anzeigen

Wie bereits erwähnt, benötigen Sie einen Service Worker, um Nachrichten zu empfangen und anzuzeigen, die von Ihrem Server an den Client gesendet wurden. Weitere Informationen finden Sie unter Push-Nachrichten als Benachrichtigungen empfangen und anzeigen.

  • Öffnen Sie public/service-worker.js und ersetzen Sie den Kommentar // TODO im push-Ereignishandler des Service Workers durch den folgenden Code:
// TODO
let data = event.data.json();
const image = 'logo.png';
const options = {
  body: data.options.body,
  icon: image
}
self.registration.showNotification(
  data.title, 
  options
);
  • Kehren Sie zum App-Tab zurück.
  • Klicken Sie auf Benachrichtigen. Sie sollten eine Push-Benachrichtigung erhalten.
  • Öffne die URL deines App-Tabs in anderen Browsern (oder sogar auf anderen Geräten), durchlaufe den Abo-Vorgang und klicke dann auf Alle benachrichtigen. Sie sollten dieselbe Push-Benachrichtigung in allen Browsern erhalten, die Sie abonniert haben. Unter Browserkompatibilität finden Sie eine Liste der Browser-/Betriebssystemkombinationen, die bekanntermaßen funktionieren oder nicht funktionieren.

Sie können die Benachrichtigung auf viele Arten anpassen. Weitere Informationen finden Sie in den Parametern von ServiceWorkerRegistration.showNotification().

URL öffnen, wenn ein Nutzer auf eine Benachrichtigung klickt

In der Praxis werden Sie die Benachrichtigung wahrscheinlich nutzen, um Nutzer wieder anzusprechen und sie dazu zu bringen, Ihre Website zu besuchen. Dazu müssen Sie Ihren Service Worker etwas genauer konfigurieren.

  • Ersetzen Sie den Kommentar // TODO im notificationclick-Ereignishandler des Service Workers durch den folgenden Code:
// TODO
event.notification.close();
event.waitUntil(self.clients.openWindow('https://web.dev'));
  • Kehren Sie zum App-Tab zurück, senden Sie sich selbst eine weitere Benachrichtigung und klicken Sie dann auf die Benachrichtigung. In Ihrem Browser sollte ein neuer Tab geöffnet und https://web.dev geladen werden.

Nächste Schritte