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.

In diesem Codelab erfahren Sie, wie Sie lernen, indem Sie wird viel über Konzepte gesprochen. Zur Kasse Wie funktionieren Push-Benachrichtigungen? um mehr über die Konzepte von Push-Benachrichtigungen zu erfahren.

Der Servercode für dieses Codelab ist bereits vollständig. Sie werden nur Implementierung des Clients in diesem Codelab. Um zu erfahren, wie Sie ein Push-Benachrichtigungsserver, siehe Codelab: Push-Benachrichtigungen erstellen Server.

Dann probieren Sie push-notifications-client-codelab-complete aus. (Quelle) um den vollständigen Code zu sehen.

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 Betriebssystem und Browser):

  • macOS: Brave, Edge, Safari
  • iOS

Einrichtung

Bearbeitbare Kopie des Codes abrufen

Der Code-Editor, den Sie rechts neben diesen Anweisungen sehen, wird als Glitch-UI in diesem Codelab ausführen.

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

Authentifizierung einrichten

Bevor du Push-Benachrichtigungen erhalten kannst, musst du Ihrem Server und Client mit Authentifizierungsschlüsseln. Weitere Informationen finden Sie unter Web-Push-Protokollanfragen signieren. um mehr über die Gründe zu erfahren.

  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. Privaten Schlüssel kopieren und öffentlichen Schlüsselwerten.
  3. Öffne in der Glitch-Benutzeroberfläche .env und aktualisiere VAPID_PUBLIC_KEY und VAPID_PRIVATE_KEY. Festlegen VAPID_SUBJECT in mailto:test@test.test. Alle diese Werte sollten umschlossen in doppelte Anführungszeichen gesetzt. Nachdem Sie die Änderungen vorgenommen haben, sollte die Datei .env wie folgt aussehen: etwa so:
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, Benachrichtigungen. Registrieren Sie den Service Worker so früh wie möglich. Weitere Informationen finden Sie unter Push-Nachrichten empfangen und anzeigen 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. Wenn Sie sich eine Vorschau der Website ansehen möchten, klicken Sie auf App ansehen. Drücken Sie dann Vollbild Vollbild
  1. Drücken Sie „Strg + Umschalttaste + J“ (oder „Befehlstaste + Option + J“ auf einem Mac), um die Entwicklertools zu öffnen.
  2. Klicken Sie auf den Tab Console. Sie sollten die Meldung sehen, Service worker was registered. wurde in der Console protokolliert.

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 dies explizit bestätigt wurde (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 werden Sie wahrscheinlich gefragt, Ihnen Push-Benachrichtigungen zu senden. Klicken Sie auf Zulassen oder eine ähnliche Option. die Ihr Browser/Betriebssystem verwendet. In der Konsole sollten Sie eine Meldung sehen, die darauf hinweist, ob der Antrag angenommen oder abgelehnt wurde.

Push-Benachrichtigungen abonnieren

Der Aboprozess umfasst die Interaktion mit einem Webdienst, durch den Browseranbieter, der als Push-Dienst bezeichnet wird. Sobald Sie Die Push-Benachrichtigungs-Aboinformationen, die Sie benötigen, um sie an einen Server zu senden und vom Server langfristig in einer Datenbank speichern. Siehe 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. Vielleicht ist das eines Tages um Nachrichten zu senden, ohne für den Nutzer sichtbare Benachrichtigungen anzuzeigen, (stumme Übertragungen), aber Browser erlauben diese Funktion derzeit nicht. weil sie Bedenken im Hinblick auf den Datenschutz haben.

Der Wert applicationServerKey stützt sich auf eine Dienstfunktion, die Konvertiert einen base64-String in ein Uint8Array. Dieser Wert wird für zwischen Ihrem Server und dem Push-Dienst.

Push-Benachrichtigungen abbestellen

Nachdem ein Nutzer Push-Benachrichtigungen abonniert hat, muss Ihre Benutzeroberfläche eine Möglichkeit bieten, sich abzumelden, falls der Nutzer seine Meinung ändert und keine Push-Benachrichtigungen mehr erhalten möchte.

  1. Kommentar // TODO in unsubscribeButtonHandler() ersetzen 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, der die Empfangen und Anzeigen von Nachrichten, die an den Client gesendet wurden von Ihrem Server. Weitere Informationen finden Sie unter Push-Nachrichten empfangen und anzeigen als Benachrichtigungen finden Sie weitere Informationen.

  1. public/service-worker.js öffnen und // TODO-Kommentar ersetzen im push-Event-Handler des Service Workers mit dem folgenden Code ein:
// 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. Versuchen Sie, die URL Ihres App-Tabs in anderen Browsern (oder sogar anderen Geräten) den Abo-Workflow durchlaufen und dann Klicken Sie auf Alle benachrichtigen. Sie sollten dieselbe Push-Benachrichtigung erhalten. in allen Browsern, die Sie abonniert haben. Weitere Informationen Browserkompatibilität: Hier finden Sie eine Liste der Browser und Betriebssysteme. Kombinationen, die bekanntermaßen funktionieren oder nicht funktionieren.

Du kannst die Benachrichtigung auf viele Arten anpassen. Die Parameter der ServiceWorkerRegistration.showNotification().

URL öffnen, wenn ein Nutzer auf eine Benachrichtigung klickt

In der Praxis werden Sie die Benachrichtigung wahrscheinlich um Nutzer noch einmal anzusprechen und sie zum Besuch Ihrer Website aufzufordern. Dazu müssen Sie Ihren Service Worker noch etwas konfigurieren.

  1. Den Kommentar // TODO im notificationclick des Service Workers ersetzen mit dem folgenden Code:
// TODO
event.notification.close();
event.waitUntil(self.clients.openWindow('https://web.dev'));
  1. Kehre zum App-Tab zurück, sende dir eine weitere Benachrichtigung und klicken Sie auf die Benachrichtigung. Im Browser sollte ein neuer Tab geöffnet und geladen werden https://web.dev

Nächste Schritte