Push-Benachrichtigungen in Vue-PWAs
Push API, Notification API, VAPID-Schlüssel, Benutzer abonnieren und Benachrichtigungen vom Server senden
Push-Benachrichtigungen in Vue-PWAs ist eine kostenlose Vue 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 Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.
Push-Benachrichtigungen in einer PWA
Web Push ermöglicht es Ihrem Server, einem Benutzer auch dann Benachrichtigungen zu senden, wenn die App geschlossen ist. Dabei werden die Notification API, die Push API und ein Service Worker kombiniert – alles auf Grundlage der ausdrücklichen Zustimmung des Benutzers.
Berechtigung anfordern
Sie müssen vor dem Abonnieren um Erlaubnis bitten. Notification.requestPermission() gibt ein Promise zurück, das zu "granted", "denied" oder "default" aufgelöst wird.
const permission = await Notification.requestPermission();
if (permission === "granted") {
// proceed to subscribe
}Durch eine Benutzeraktion auslösen
Browser verlangen, dass der Berechtigungsdialog auf eine Benutzeraktion wie einen Klick auf eine Schaltfläche folgt. Fordern Sie die Berechtigung niemals beim Laden der Seite an – der Aufruf wird ignoriert oder verärgert die Benutzer.
<button @click="enableNotifications">
Enable notifications
</button>Service-Worker-Registrierung abrufen
Push-Abonnements gehören zur aktiven Service-Worker-Registrierung. Warten Sie auf navigator.serviceWorker.ready, um sie abzurufen.
const registration = await navigator.serviceWorker.ready;Der applicationServerKey
Push verwendet VAPID-Schlüssel. Der Server verwahrt den privaten Schlüssel; der Client abonniert mit dem öffentlichen Schlüssel, der in ein Uint8Array umgewandelt wird.
function urlBase64ToUint8Array(base64) {
const padding = "=".repeat((4 - base64.length % 4) % 4);
const raw = atob((base64 + padding).replace(/-/g, "+").replace(/_/g, "/"));
return Uint8Array.from([...raw].map((c) => c.charCodeAt(0)));
}pushManager.subscribe
Abonnieren Sie über den pushManager der Registrierung. Setzen Sie userVisibleOnly: true und übergeben Sie den umgewandelten applicationServerKey.
const subscription = await registration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: urlBase64ToUint8Array(VAPID_PUBLIC_KEY)
});Warum userVisibleOnly
userVisibleOnly: true garantiert, dass jeder Push eine sichtbare Benachrichtigung anzeigt. Browser verlangen dies, um heimliches Tracking im Hintergrund zu verhindern.
Abonnement an Ihren Server senden
Das Abonnementobjekt enthält den Endpunkt und die Schlüssel, die der Server benötigt. Senden Sie es per POST an Ihr Backend, damit es für spätere Sendungen gespeichert wird.
await fetch("/api/subscribe", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(subscription)
});Der Server sendet einen Push
Ihr Backend verwendet eine Web-Push-Bibliothek und den privaten VAPID-Schlüssel, um eine Payload an den gespeicherten Endpunkt zu senden.
// Node backend (web-push library)
webpush.sendNotification(
subscription,
JSON.stringify({ title: "Hello", body: "New message" })
);Push im Service Worker empfangen
Der Service Worker verarbeitet das push-Ereignis und ruft showNotification auf, um die Benachrichtigung anzuzeigen.
// service worker
self.addEventListener("push", (event) => {
const data = event.data.json();
event.waitUntil(
self.registration.showNotification(data.title, {
body: data.body,
icon: "/pwa-192.png"
})
);
});Klicks auf Benachrichtigungen verarbeiten
Reagieren Sie auf Klicks mit dem Ereignis notificationclick, um die App auf der richtigen Seite zu fokussieren oder zu öffnen.
self.addEventListener("notificationclick", (event) => {
event.notification.close();
event.waitUntil(clients.openWindow("/inbox"));
});Kurzer Check
Warum ist userVisibleOnly: true beim Abonnieren von Push erforderlich?
Zusammenfassung
Web Push beginnt mit Notification.requestPermission(), das durch eine Benutzeraktion ausgelöst wird. Anschließend wird mit registration.pushManager.subscribe, userVisibleOnly: true und einem applicationServerKey abonniert. Senden Sie das Abonnement an Ihren Server. Dieser sendet Payloads, die der Service Worker in seinem push-Ereignis empfängt und mit showNotification anzeigt.
Häufig gestellte Fragen
Ist die Lektion „Push-Benachrichtigungen in Vue-PWAs“ kostenlos?
Ja — der vollständige Text von „Push-Benachrichtigungen in Vue-PWAs“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Push-Benachrichtigungen in Vue-PWAs“?
Push API, Notification API, VAPID-Schlüssel, Benutzer abonnieren und Benachrichtigungen vom Server senden Du übst Vue 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 Vue Academy zu starten?
Keine Vorkenntnisse erforderlich. Vue 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 in Vue-PWAs“?
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 Vue Academy-Lektion Code schreiben und ausführen?
Ja. Jede Vue 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
- vite-plugin-pwa einrichten
- Strategien für Service Worker
- Offline-Unterstützung und Background Sync
- Push-Benachrichtigungen in Vue-PWAs