Codelab: Client für Push-Benachrichtigungen erstellen

Kate Jeffreys
Kate Jeffreys
Kayce Basques

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 den Nutzer Push-Benachrichtigungen.
  • Er empfängt Push-Nachrichten und zeigt sie als Benachrichtigungen an.
  • Der Nutzer wird von Push-Benachrichtigungen abgemeldet.

Dieses Codelab soll Ihnen beim Lernen helfen. Es werden dabei nur wenige Konzepte behandelt. Unter Wie funktionieren Push-Benachrichtigungen? finden Sie weitere Informationen zu Push-Benachrichtigungen.

Der Servercode für dieses Codelab ist bereits vollständig. In diesem Codelab implementieren Sie nur den Client. Informationen zum Implementieren eines Push-Benachrichtigungsservers finden Sie im Codelab zum Erstellen eines Push-Benachrichtigungsservers.

Den vollständigen Code finden Sie unter push-notifications-client-codelab-complete (Quelle).

Browserkompatibilität

Dieses Codelab funktioniert mit den folgenden Betriebssystem- und Browserkombinationen:

  • 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 abrufen

Der Code-Editor, der rechts neben dieser Anleitung angezeigt wird, wird in diesem Codelab als Glitch-UI bezeichnet.

  1. Klicke auf Remix zum Bearbeiten, um das Projekt bearbeitbar zu machen.

Authentifizierung einrichten

Bevor Sie Push-Benachrichtigungen verwenden können, müssen Sie Ihren Server und Client mit Authentifizierungsschlüsseln einrichten. Weitere Informationen finden Sie unter Web Push-Protokollanfragen signieren.

  1. Klicken Sie in der Glitch-Benutzeroberfläche auf Tools und dann auf Terminal, um das Glitch-Terminal zu öffnen.
  2. Führen Sie im Glitch-Terminal npx web-push generate-vapid-keys aus. Kopieren Sie die Werte des privaten und des öffentlichen Schlüssels.
  3. Öffne in der Glitch-Benutzeroberfläche .env und aktualisiere VAPID_PUBLIC_KEY und VAPID_PRIVATE_KEY. Legen Sie VAPID_SUBJECT auf mailto:test@test.test fest. Alle diese Werte müssen in doppelte Anführungszeichen gesetzt werden. Nach den Aktualisierungen sollte Ihre .env-Datei in etwa so aussehen:
VAPID_PUBLIC_KEY="BKiwTvD9HA…"
VAPID_PRIVATE_KEY="4mXG9jBUaU…"
VAPID_SUBJECT="mailto:test@test.test"
  1. Schließen Sie das Glitch-Terminal.
  1. Öffnen Sie public/index.js.
  2. Ersetzen Sie VAPID_PUBLIC_KEY_VALUE_HERE durch den Wert Ihres öffentlichen Schlüssels.

Service Worker registrieren

Ihr Client benötigt schließlich einen Service Worker, um Benachrichtigungen zu empfangen und anzuzeigen. Es empfiehlt sich, den Dienst-Worker so früh wie möglich zu registrieren. Weitere Informationen finden Sie unter Push-Nachrichten als Benachrichtigungen empfangen und anzeigen.

  1. 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);
  1. Wenn Sie sich eine Vorschau der Website ansehen möchten, klicken Sie auf App ansehen und dann auf Vollbild Vollbild.
  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. Die Meldung Service worker was registered. sollte in der Console protokolliert werden.

Berechtigung für Push-Benachrichtigungen anfordern

Sie sollten niemals die Berechtigung zum Senden von Push-Benachrichtigungen beim Seitenaufbau anfordern. Stattdessen sollte Ihre Benutzeroberfläche den Nutzer fragen, ob er Push-Benachrichtigungen erhalten möchte. Sobald die Nutzer die Berechtigung explizit bestätigt haben (z. B. durch Klicken auf eine Schaltfläche), können Sie mit dem formalen Verfahren zur Erlangung der Berechtigung für Push-Benachrichtigungen vom Browser beginnen.

  1. Klicken Sie in der Glitch-Benutzeroberfläche auf Quellcode ansehen, um zu Ihrem Code zurückzukehren.
  2. 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.');
}
  1. Kehren Sie zum Tab „App“ zurück und klicken Sie auf Subscribe to push. Ihr Browser oder Betriebssystem wird Sie wahrscheinlich fragen, ob Sie der Website erlauben möchten, Ihnen Push-Benachrichtigungen zu senden. Klicken Sie auf Zulassen oder eine ähnliche Wortgruppe, die in Ihrem Browser bzw. Betriebssystem verwendet wird. In der Console sollte eine Meldung angezeigt werden, die angibt, ob die Anfrage angenommen oder abgelehnt wurde.

Push-Benachrichtigungen abonnieren

Beim Aboprozess wird mit einem vom Browseranbieter gesteuerten Webdienst interagiert, der als Push-Dienst bezeichnet wird. Sobald Sie die Informationen zum Push-Benachrichtigungsabo erhalten haben, müssen Sie sie an einen Server senden und den Server bitten, sie langfristig in einer Datenbank zu speichern. Weitere Informationen zum Aboprozess findest du unter Client für Push-Benachrichtigungen registrieren.

  1. Fügen Sie subscribeButtonHandler() den folgenden hervorgehobenen Code 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 wird vielleicht eines Tages möglich sein, Push-Nachrichten zu senden, ohne dass Nutzer sichtbare Benachrichtigungen sehen (stille Push-Nachrichten). Derzeit ist diese Funktion jedoch aus Datenschutzgründen nicht in Browsern verfügbar.

Der applicationServerKey-Wert basiert auf einer Dienstprogrammfunktion, 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.

  1. 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-Nachrichten 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 gepusht wurden. Weitere Informationen finden Sie unter Push-Nachrichten als Benachrichtigungen empfangen und anzeigen.

  1. Öffnen Sie public/service-worker.js und ersetzen Sie den Kommentar // TODO im Ereignishandler push des Service Workers durch den folgenden Code:
// TODO
let data = event.data.json();
const image = 'https://cdn.glitch.com/614286c9-b4fc-4303-a6a9-a4cef0601b74%2Flogo.png?v=1605150951230';
const options = {
  body: data.options.body,
  icon: image
}
self.registration.showNotification(
  data.title, 
  options
);
  1. Kehren Sie zum Tab „App“ zurück.
  2. Klicken Sie auf Benachrichtigen. Sie sollten eine Push-Benachrichtigung erhalten.
  3. Öffnen Sie die URL Ihres App-Tabs in anderen Browsern (oder sogar auf anderen Geräten), führen Sie den Abovorgang durch und klicken Sie 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 bekanntlich funktionieren oder nicht.

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 verwenden, um den Nutzer noch einmal anzusprechen und ihn zum Besuch Ihrer Website aufzufordern. Dazu müssen Sie Ihren Service Worker noch etwas konfigurieren.

  1. Ersetzen Sie den Kommentar // TODO im notificationclick-Event-Handler des Service Workers durch den folgenden Code:
// TODO
event.notification.close();
event.waitUntil(self.clients.openWindow('https://web.dev'));
  1. Kehren Sie zum App-Tab zurück, senden Sie sich eine weitere Benachrichtigung und klicken Sie dann auf die Benachrichtigung. Ihr Browser sollte einen neuen Tab öffnen und https://web.dev laden.

Nächste Schritte