Push-Benachrichtigungen
Fordern Sie die Berechtigung an, abonnieren Sie Push-Nachrichten mit der Push API, empfangen Sie Nachrichten im Service Worker und zeigen Sie Benachrichtigungen mit showNotification an.
Push-Benachrichtigungen ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Warum Push-Benachrichtigungen?
Push-Benachrichtigungen holen Nutzer zurück, wenn die App nicht geöffnet ist – etwa bei Nachrichten, News-Updates oder Erinnerungen an abgebrochene Warenkörbe. Sie werden vom Service Worker bereitgestellt und funktionieren daher auch bei geschlossener Seite.
Push API + Notifications API
Zwei Browser-APIs arbeiten zusammen. Die Push API empfängt Nachrichten von einem Server über ein Push-Abonnement. Die Notifications API zeigt die Nachricht dem Nutzer an.
Berechtigung anfordern
Bitten Sie den Nutzer vor dem Abonnieren um die Berechtigung – und tun Sie dies nur als Reaktion auf eine eindeutige Nutzeraktion (Klick auf eine Schaltfläche), nicht beim Laden der Seite.
async function enableNotifications() {
const permission = await Notification.requestPermission();
if (permission !== 'granted') {
alert('Notifications denied');
return;
}
// proceed to subscribe...
}Push-Abonnement
Abonnieren Sie den Push-Dienst über die aktive Service-Worker-Registrierung. Der öffentliche VAPID-Schlüssel des Servers authentifiziert das Abonnement.
async function subscribeToPush() {
const reg = await navigator.serviceWorker.ready;
const sub = await reg.pushManager.subscribe({
userVisibleOnly: true, // required: every push must show a notification
applicationServerKey: urlBase64ToUint8Array(VAPID_PUBLIC_KEY)
});
// Send sub to your server:
await fetch('/api/save-subscription', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(sub)
});
}VAPID-Schlüssel
VAPID-Schlüssel (Voluntary Application Server Identification) identifizieren Ihren Server gegenüber Push-Diensten (FCM, Mozilla usw.). Generieren Sie sie einmalig und speichern Sie den privaten Schlüssel auf Ihrem Server.
# Generate VAPID keys with web-push CLI:
npx web-push generate-vapid-keys
# Output:
# Public Key: BJ...
# Private Key: ka...Push auf dem Server
Verwenden Sie die npm-Bibliothek web-push, um einen Push an ein gespeichertes Abonnement zu senden.
import webpush from 'web-push';
webpush.setVapidDetails(
'mailto:you@example.com',
process.env.VAPID_PUBLIC,
process.env.VAPID_PRIVATE
);
await webpush.sendNotification(savedSubscription, JSON.stringify({
title: 'New message',
body: 'Alice sent you a message',
url: '/inbox/123'
}));Push im Service Worker verarbeiten
Der SW empfängt das Push-Ereignis und zeigt eine Benachrichtigung an.
// sw.js
self.addEventListener('push', (event) => {
const data = event.data ? event.data.json() : {};
event.waitUntil(
self.registration.showNotification(data.title || 'Notification', {
body: data.body,
icon: '/icons/192.png',
badge: '/icons/badge.png',
data: { url: data.url }
})
);
});Handler für Benachrichtigungsklicks
Öffnen oder fokussieren Sie die App, wenn der Nutzer auf eine Benachrichtigung klickt.
self.addEventListener('notificationclick', (event) => {
event.notification.close();
const url = event.notification.data.url || '/';
event.waitUntil(
clients.matchAll({ type: 'window' }).then(clientList => {
for (const client of clientList) {
if (client.url.endsWith(url) && 'focus' in client) return client.focus();
}
return clients.openWindow(url);
})
);
});Optionen für Benachrichtigungen
Passen Sie Folgendes an: icon, badge (kleines Symbol im Benachrichtigungsbereich), image (groß), actions (Schaltflächen), tag (ersetzt ältere Benachrichtigungen mit demselben Tag), requireInteraction (bleibt sichtbar, bis es verworfen wird), silent.
self.registration.showNotification('Message', {
body: 'Alice sent you a photo',
icon: '/icons/192.png',
image: '/images/alice-photo.jpg',
actions: [
{ action: 'view', title: 'View' },
{ action: 'reply', title: 'Reply' }
],
tag: 'message-from-alice', // replaces earlier 'message-from-alice'
requireInteraction: false
});Abonnement kündigen
Geben Sie Nutzern die Möglichkeit, sich abzumelden – rufen Sie pushSubscription.unsubscribe() auf und entfernen Sie das Abonnement von Ihrem Server.
async function disablePush() {
const reg = await navigator.serviceWorker.ready;
const sub = await reg.pushManager.getSubscription();
if (sub) {
await sub.unsubscribe();
await fetch('/api/delete-subscription', {
method: 'POST',
body: JSON.stringify({ endpoint: sub.endpoint })
});
}
}iOS-Unterstützung
iOS 16.4+ unterstützt Web Push, aber nur für PWAs, die auf dem Startbildschirm installiert wurden. Geräte vor iOS 16.4 und Safari im Web auf dem iPhone unterstützen Web Push überhaupt nicht.
Bewährte Vorgehensweisen
1) Fragen Sie nur nach einer eindeutigen Nutzeraktion nach der Berechtigung. 2) Senden Sie sinnvolle und seltene Benachrichtigungen. 3) Zeigen Sie bei einem Push-Ereignis immer eine Benachrichtigung an (Browser können die Berechtigung widerrufen, wenn Sie dies nicht tun). 4) Bieten Sie eine einfache Möglichkeit zum Abbestellen. 5) Testen Sie mit allen drei Push-Diensten (FCM, Mozilla, WindowsPush).
Häufige Stolperfallen
Push schlägt stillschweigend fehl, wenn userVisibleOnly false ist (Chrome erfordert true), die VAPID-Schlüssel nicht übereinstimmen, das Abonnement abgelaufen ist (erneut abonnieren) oder beim Push-Ereignis keine Benachrichtigung angezeigt wird (der Browser widerruft die Berechtigung).
Schnelltest
Warum muss jede Push-Nachricht zu einer sichtbaren Benachrichtigung führen (mit userVisibleOnly: true)?
Rückblick: Push-Benachrichtigungen
Fordern Sie die Berechtigung nur als Reaktion auf eine Nutzeraktion an. Abonnieren Sie über reg.pushManager.subscribe mit dem öffentlichen VAPID-Schlüssel. Der Server verwendet die web-push-Bibliothek zum Senden. Das Push-Ereignis des SW ruft showNotification auf. notificationclick öffnet oder fokussiert Ihre App. Passen Sie icon, badge, image, actions und tag an. Zeigen Sie immer eine Benachrichtigung an (userVisibleOnly: true ist erforderlich). iOS 16.4+ unterstützt dies, aber nur für installierte PWAs.
Häufig gestellte Fragen
Ist die Lektion „Push-Benachrichtigungen“ kostenlos?
Ja — der vollständige Text von „Push-Benachrichtigungen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Push-Benachrichtigungen“?
Fordern Sie die Berechtigung an, abonnieren Sie Push-Nachrichten mit der Push API, empfangen Sie Nachrichten im Service Worker und zeigen Sie Benachrichtigungen mit showNotification an. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Frontend Academy zu starten?
Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.
Wie lange dauert die Lektion „Push-Benachrichtigungen“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?
Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Das Web-App-Manifest
- Registrierung und Lebenszyklus von Service Workern
- Offline-Caching-Strategien: CacheFirst und NetworkFirst
- Push-Benachrichtigungen