Codelab: Client für Push-Benachrichtigungen erstellen

Kate Jeffreys
Kate Jeffreys
Kayce Basken

In diesem Codelab wird Schritt für Schritt gezeigt, wie Sie einen Client für Push-Benachrichtigungen erstellen. Am Ende des Codelab haben Sie einen Client, der:

  • Abonniert den Nutzer für Push-Benachrichtigungen.
  • Empfängt Push-Nachrichten und zeigt sie als Benachrichtigungen an.
  • Hiermit werden Push-Benachrichtigungen für den Nutzer abbestellt.

In diesem Codelab geht es um das Lernen durch Ausprobieren. Es werden nicht viel über Konzepte gesprochen. Lesen Sie Wie funktionieren Push-Benachrichtigungen?, um mehr über die Konzepte von Push-Benachrichtigungen zu erfahren.

Der Servercode dieses Codelab ist bereits vollständig. Sie implementieren den Client nur in diesem Codelab. Informationen zum Implementieren eines Push-Benachrichtigungsservers finden Sie unter Codelab: Push-Benachrichtigungsserver erstellen.

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

Browserkompatibilität

Dieses Codelab funktioniert bekanntermaßen mit den folgenden Kombinationen aus Betriebssystemen und Browsern:

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

Dieses Codelab funktioniert bekanntermaßen nicht mit den folgenden Betriebssystemen (oder Kombinationen aus Betriebssystemen und Browser):

  • macOS: Brave, Edge, Safari
  • iOS

Einrichtung

Bearbeitbare Kopie des Codes abrufen

Der Code-Editor, den Sie rechts neben dieser Anleitung sehen, wird in diesem Codelab als Glitch UI bezeichnet.

  1. Klicke auf Zu bearbeitende Remixe, damit das Projekt bearbeitet werden kann.

Authentifizierung einrichten

Bevor Sie Push-Benachrichtigungen erhalten können, müssen Sie Ihren Server und Ihren Client mit Authentifizierungsschlüsseln einrichten. Informationen zu den Gründen findest du unter Web-Push-Protokollanfragen signieren.

  1. Klicke in der Glitch-Benutzeroberfläche auf Tools und dann auf Terminal, um das Glitch-Terminal zu öffnen.
  2. Führe im Glitch Terminal npx web-push generate-vapid-keys aus. Kopieren Sie den privaten Schlüssel und die Werte 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. Nachdem Sie die Änderungen vorgenommen haben, sollte Ihre .env-Datei in etwa so aussehen:
VAPID_PUBLIC_KEY="BKiwTvD9HA…"
VAPID_PRIVATE_KEY="4mXG9jBUaU…"
VAPID_SUBJECT="mailto:test@test.test"
  1. Schließe den 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, der Benachrichtigungen empfangen und anzeigen kann. Es empfiehlt sich, den Service Worker so früh wie möglich zu registrieren. Weitere Informationen finden Sie unter Senden und Anzeigen von Push-Nachrichten als Benachrichtigungen.

  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. Um die Website als Vorschau anzusehen, wählen Sie App ansehen und dann Vollbild Vollbild aus.
  1. Drücken Sie Strg + Umschalttaste + J (oder Befehlstaste + Option + J auf dem Mac), um die Entwicklertools zu öffnen.
  2. Klicken Sie auf den Tab Console. In der Console sollte die Meldung Service worker was registered. protokolliert werden.

Berechtigung für Push-Benachrichtigungen anfordern

Sie sollten niemals eine 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 sie dies explizit bestätigt haben (z. B. mit einem Klick), können Sie mit dem formalen Prozess zum Einholen der Berechtigung für Push-Benachrichtigungen vom Browser beginnen.

  1. Klicke in der Glitch-Benutzeroberfläche auf View Source (Quelle anzeigen), um zu deinem Code zurückzukehren.
  2. Ersetzen Sie in public/index.js den // TODO-Kommentar in subscribeButtonHandler() durch 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 Abonnieren, um Push-Nachrichten zu senden. In Ihrem Browser oder Betriebssystem werden Sie wahrscheinlich gefragt, ob Sie Push-Benachrichtigungen von der Website zulassen möchten. Klicken Sie auf Zulassen oder auf die entsprechende Option, die Ihr Browser bzw. Betriebssystem verwendet. In der Console sollte eine Meldung angezeigt werden, aus der hervorgeht, ob die Anfrage angenommen oder abgelehnt wurde.

Push-Benachrichtigungen abonnieren

Der Abovorgang umfasst die Interaktion mit einem vom Browseranbieter gesteuerten Webdienst, der als Push-Dienst bezeichnet wird. Sobald Sie die Aboinformationen für Push-Benachrichtigungen erhalten haben, müssen Sie sie an einen Server senden und den Server langfristig in einer Datenbank speichern lassen. Weitere Informationen zum Abovorgang findest du unter Push-Benachrichtigungen für den Client abonnieren.

  1. Fügen Sie subscribeButtonHandler() den folgenden markierten 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 kann eines Tages möglich sein, Nachrichten zu senden, ohne für den Nutzer sichtbare Benachrichtigungen anzuzeigen (stumme Push-Vorgänge). Browser lässt diese Funktion jedoch aus Datenschutzgründen derzeit nicht zu.

Der Wert applicationServerKey basiert auf einer Dienstfunktion, die einen base64-String in ein Uint8Array umwandelt. 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 UI eine Möglichkeit bieten, sich abzumelden, 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 erhalten und als Benachrichtigung anzeigen

Wie bereits erwähnt, benötigen Sie für den Empfang und die Anzeige von Nachrichten, die von Ihrem Server an den Client gesendet wurden, einen Service Worker. 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 Event-Handler push des Service Workers durch 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. Gehen Sie zurück zum Tab „App“.
  2. Klicken Sie auf Benachrichtigen. Sie sollten eine Push-Benachrichtigung erhalten.
  3. Versuche, die URL deines App-Tabs in anderen Browsern (oder sogar anderen Geräten) zu öffnen, den Abo-Workflow auszuführen und dann auf Alle benachrichtigen zu klicken. Du solltest auf allen Browsern, die du abonniert hast, dieselbe Push-Benachrichtigung erhalten. Unter Browserkompatibilität finden Sie eine Liste der Kombinationen von Browser und Betriebssystem, die bekanntermaßen funktionieren oder nicht funktionieren.

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

URL öffnen, wenn ein Nutzer auf eine Benachrichtigung klickt

In der Praxis nutzt du die Benachrichtigung wahrscheinlich, um Nutzer noch einmal anzusprechen und zum Besuch deiner Website aufzufordern. Dazu müssen Sie Ihren Service Worker etwas stärker konfigurieren.

  1. Ersetzen Sie den Kommentar // TODO im Event-Handler notificationclick 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.

Weitere Informationen