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 Codelab haben Sie einen Client, der:

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

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

Der Servercode für dieses Codelab ist bereits vollständig. Sie implementieren den Client nur in diesem Codelab. Informationen zum Implementieren eines Push-Benachrichtigungsservers finden Sie in 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

Es ist bekannt, dass dieses Codelab mit den folgenden Betriebssystemen (oder Kombinationen aus Betriebssystem und Browser) nicht funktioniert:

  • macOS: Brave, Edge, Safari
  • iOS

Einrichtung

Bearbeitbare Kopie des Codes abrufen

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

  1. Klicke auf Zum Bearbeiten Remix, damit das Projekt bearbeitet werden kann.

Authentifizierung einrichten

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

  1. Klicken Sie in der Glitch-UI 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 sollten in doppelte Anführungszeichen gesetzt werden. Nachdem Sie die Aktualisierungen vorgenommen haben, sollte die Datei .env in etwa so aussehen:
VAPID_PUBLIC_KEY="BKiwTvD9HA…"
VAPID_PRIVATE_KEY="4mXG9jBUaU…"
VAPID_SUBJECT="mailto:test@test.test"
  1. Schließe 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. Registrieren Sie den Service Worker so früh wie möglich. 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 + Wahltaste + J“ auf einem Mac), um die Entwicklertools zu öffnen.
  2. Klicken Sie auf den Tab Console. In der Console sollte die Meldung Service worker was registered. angezeigt 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 sie explizit bestätigt werden (z. B. durch einen Klick auf eine Schaltfläche), können Sie den formalen Prozess zum Erhalt der Berechtigung für Push-Benachrichtigungen über den Browser starten.

  1. Klicken Sie in der Glitch-Benutzeroberfläche auf View Source (Quelle anzeigen), um zum 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 Push-Benachrichtigungen von der Website erhalten möchten. 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

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

  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 lauten. Eines Tages kann es möglich sein, Nachrichten zu senden, ohne für den Nutzer sichtbare Benachrichtigungen anzuzeigen (stumme Push-Nachrichten), aber Browser erlauben diese Funktion derzeit aufgrund von Bedenken im Hinblick auf den Datenschutz nicht.

Der Wert applicationServerKey stützt sich auf eine Dienstfunktion, die einen base64-String in ein Uint8Array-Element 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-Nachricht empfangen und als Benachrichtigung anzeigen lassen

Wie bereits erwähnt, benötigen Sie einen Service Worker für den Empfang und die Anzeige von Nachrichten, die von Ihrem Server an den Client übertragen 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 push-Event-Handler 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. Versuche, die URL deines App-Tabs in anderen Browsern (oder auf anderen Geräten) zu öffnen, führe den Abo-Workflow durch und klicke dann auf Alle benachrichtigen. Sie sollten in allen Browsern, die Sie abonniert haben, die gleiche Push-Benachrichtigung erhalten. Unter Browserkompatibilität finden Sie eine Liste der Kombinationen aus Browser und Betriebssystem, die bekanntermaßen funktionieren oder nicht funktionieren.

Du kannst 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 auf die Benachrichtigung. Im Browser sollte ein neuer Tab geöffnet und https://web.dev geladen werden.

Nächste Schritte