Codelab: Client für Push-Benachrichtigungen erstellen

Kate Jeffreys
Kate Jeffreys
Kayce Basques
Kayce Basques
X GitHub

In diesem Codelab wird Schritt für Schritt gezeigt, 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, durch praktisches Ausprobieren zu lernen. Konzepte werden nicht ausführlich behandelt. Informationen zu Push-Benachrichtigungen finden Sie unter Funktionsweise von 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.

Browser-Kompatibilitä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 Kombinationen aus Betriebssystem und Browser):

  • macOS: Brave, Edge, Safari
  • iOS

Einrichtung

Authentifizierung einrichten

Damit 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, ähnlich wie hier.

VAPID_PUBLIC_KEY="BKiwTvD9HA…"
VAPID_PRIVATE_KEY="4mXG9jBUaU…"
VAPID_SUBJECT="mailto:test@test.test"
  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 einen Service Worker, um Benachrichtigungen zu empfangen und anzuzeigen. Am besten 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:

    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);

  2. Öffnen Sie in Chrome die Entwicklertools-Konsole.

  3. In der Console sollte die Meldung Service worker was registered. angezeigt werden.

Berechtigung zum Senden von Push-Benachrichtigungen anfordern

Sie sollten niemals beim Seitenaufbau die Berechtigung zum Senden von Push-Benachrichtigungen anfordern. Stattdessen sollte die Benutzeroberfläche den Nutzer fragen, ob er Push-Benachrichtigungen erhalten möchte. Sobald sie dies ausdrücklich bestätigen (z. B. durch Klicken auf eine Schaltfläche), können Sie den formellen Prozess starten, um die Berechtigung für Push-Benachrichtigungen vom Browser zu erhalten.

  1. Ersetzen Sie in public/index.js den Kommentar // TODO in subscribeButtonHandler() durch den folgenden Code:

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

  2. Kehren Sie zum Tab der App zurück und klicken Sie auf Subscribe to push (Push-Benachrichtigungen abonnieren). Ihr Browser oder Betriebssystem fragt Sie, ob Sie Push-Benachrichtigungen von der Website erhalten möchten.

  3. Wählen Sie Zulassen aus (oder die entsprechende Option in Ihrem Browser oder Betriebssystem). In der Console sollte eine Meldung angezeigt werden, die angibt, ob die Anfrage angenommen oder abgelehnt wurde.

Push-Benachrichtigungen abonnieren

Der Abo-Prozess umfasst die Interaktion mit einem vom Browseranbieter kontrollierten Webdienst, der 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.

  1. 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 ist vielleicht eines Tages möglich, Nachrichten ohne sichtbare Benachrichtigungen zu senden (stille Push-Benachrichtigungen), aber Browser erlauben diese Funktion aus Bedenken im Hinblick auf den Datenschutz nicht.

Der Wert applicationServerKey basiert auf einer Dienstfunktion, 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 bieten, das Abo zu kündigen, 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:
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 den Empfang und die Anzeige von Nachrichten zu verarbeiten, die von Ihrem Server an den Client gesendet 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:

    let data = event.data.json();
const image = 'logo.png';
const options = {
  body: data.options.body,
  icon: image
}
self.registration.showNotification(
  data.title,
  options
);

  2. Kehren Sie zum App-Tab zurück.

  3. Klicken Sie auf Benachrichtigen. Du solltest eine Push-Benachrichtigung erhalten.

  4. Öffnen Sie die URL Ihres App-Tabs in anderen unterstützten Browsern. Gehen Sie den Abo-Workflow durch und klicken Sie auf Alle benachrichtigen. Sie sollten in beiden die gleiche Push-Benachrichtigung erhalten.

Sie können die Benachrichtigung auf vielfältige Weise anpassen. Weitere Informationen finden Sie in den Parametern von ServiceWorkerRegistration.showNotification().

URL öffnen, wenn ein Nutzer auf eine Benachrichtigung klickt

In der Praxis würden Sie die Benachrichtigung wahrscheinlich verwenden, um den Nutzer wieder anzusprechen und ihn zum Besuch Ihrer Website aufzufordern. Dazu müssen Sie Ihren Service Worker etwas genauer konfigurieren.

  1. Ersetzen Sie den Kommentar // TODO im Event-Handler notificationclick des Service Workers durch den folgenden Code:

    event.notification.close();
event.waitUntil(self.clients.openWindow('https://web.dev'));

  2. Kehren Sie zum App-Tab zurück, senden Sie sich 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