Diese Seite wurde von der Cloud Translation API übersetzt.

Codelab: Client für Push-Benachrichtigungen erstellen
bookmark_border Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.

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 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 kaum 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.

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

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

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

Klicken Sie auf Remix to Edit (Remix zum Bearbeiten), um das Projekt bearbeitbar zu machen.

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.

Klicken Sie in der Glitch-Benutzeroberfläche auf Tools und dann auf Terminal, um das Glitch-Terminal zu öffnen.
Führen Sie im Glitch-Terminal npx web-push generate-vapid-keys aus. Kopieren Sie die Werte für den privaten und den öffentlichen Schlüssel.
Öffnen Sie in der Glitch-Benutzeroberfläche .env und aktualisieren Sie VAPID_PUBLIC_KEY und VAPID_PRIVATE_KEY. Setzen Sie VAPID_SUBJECT auf mailto:test@test.test. Alle diese Werte müssen in doppelte Anführungszeichen gesetzt werden. Nachdem Sie die Änderungen vorgenommen haben, sollte die Datei .env etwa so aussehen:

VAPID_PUBLIC_KEY="BKiwTvD9HA…"
VAPID_PRIVATE_KEY="4mXG9jBUaU…"
VAPID_SUBJECT=&quot;mailto:test@test.test"

Schließen Sie das Glitch-Terminal.

Umgebungsvariablenwerte (der Inhalt von .env) sind für ein einzelnes Glitch-Projekt eindeutig. Wenn Sie Ihr Projekt remixen, werden die Werte in .env nicht kopiert.

Ö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 schließlich 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 na&&vigator  'PushManager' in window) {
  navigator.serviceWorker.register('./service-worker.js').then(ser>viceWorkerRegistration = {
    console.info('Service worker was registered.');
    console.info({serviceWorkerRe>gistration});
  }).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);

Wenn Sie sich eine Vorschau der Website ansehen möchten, drücken Sie App ansehen und dann Vollbild .

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.

Klicken Sie in der Glitch-Benutzeroberfläche auf View Source (Quelle ansehen), um zu Ihrem Code zurückzukehren.
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, die Ihr Browser/Betriebssystem verwendet). 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': &#39;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-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
);

Kehren Sie zum App-Tab zurück.
Klicken Sie auf Benachrichtigen. Sie sollten eine Push-Benachrichtigung erhalten.
Versuche, die URL deines App-Tabs in anderen Browsern (oder sogar auf anderen Geräten) zu öffnen, den Abo-Vorgang durchzuführen und dann auf Alle benachrichtigen zu klicken. 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().

Der Aufruf von self.skipWaiting() im install-Listener Ihres Service Workers ist wichtig. Eine Erläuterung finden Sie unter Wartephase überspringen. Andernfalls würden die Codeänderungen, die Sie an Ihrem Service Worker vornehmen, nicht sofort wirksam. Ob Sie diese Funktion auf Ihrer eigenen Website verwenden möchten, hängt von Ihren Anforderungen ab. In jedem Fall ist es wichtig, die Auswirkungen zu verstehen.

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&#39;));

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

Unter ServiceWorkerRegistration.showNotification() findest du alle Möglichkeiten, Benachrichtigungen anzupassen.
Weitere Informationen zur Funktionsweise von Push-Benachrichtigungen finden Sie unter Push-Benachrichtigungen – Übersicht.
Im Codelab: Build a push notification server erfahren Sie, wie Sie einen Server erstellen, der Abonnements verwaltet und Web-Push-Protokollanfragen sendet.
Mit dem Benachrichtigungsgenerator können Sie alle Möglichkeiten zum Anpassen von Benachrichtigungen ausprobieren.