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.
- 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.
- Klicken Sie in der Glitch-UI 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 des privaten und des öffentlichen Schlüssels. - Öffne in der Glitch-Benutzeroberfläche
.env
und aktualisiereVAPID_PUBLIC_KEY
undVAPID_PRIVATE_KEY
. Legen SieVAPID_SUBJECT
aufmailto: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"
- Schließe das Glitch-Terminal.
- Öffnen Sie
public/index.js
. - 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.
- 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);
- Wenn Sie sich eine Vorschau der Website ansehen möchten, klicken Sie auf App ansehen und dann auf Vollbild .
- Drücken Sie „Strg + Umschalttaste + J“ (oder „Befehlstaste + Wahltaste + J“ auf einem Mac), um die Entwicklertools zu öffnen.
- 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.
- Klicken Sie in der Glitch-Benutzeroberfläche auf View Source (Quelle anzeigen), um zum Code zurückzukehren.
- Ersetzen Sie in
public/index.js
den Kommentar// TODO
insubscribeButtonHandler()
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 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.
- 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.
- Ersetzen Sie den Kommentar
// TODO
inunsubscribeButtonHandler()
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.
- Öffnen Sie
public/service-worker.js
und ersetzen Sie den Kommentar// TODO
impush
-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 Tab „App“ zurück.
- Klicken Sie auf Benachrichtigen. Sie sollten eine Push-Benachrichtigung erhalten.
- 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.
- Ersetzen Sie den Kommentar
// TODO
imnotificationclick
-Event-Handler des Service Workers durch den folgenden Code:
// TODO
event.notification.close();
event.waitUntil(self.clients.openWindow('https://web.dev'));
- 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
- Unter
ServiceWorkerRegistration.showNotification()
findest du die verschiedenen Möglichkeiten zum Anpassen von Benachrichtigungen. - Ein tieferes konzeptionelles Verständnis der Funktionsweise von Push-Benachrichtigungen finden Sie unter Push-Benachrichtigungen – Übersicht.
- In Codelab: Push-Benachrichtigungsserver erstellen erfahren Sie, wie Sie einen Server erstellen, der Abos verwaltet und Web-Push-Protokollanfragen sendet.
- Probieren Sie den Notification Generator aus, um alle Möglichkeiten zur Anpassung von Benachrichtigungen zu testen.