Signatur
Beschreibung
Die Eigenschaft data eines PushEvent gibt Zugriff auf die Nutzdaten (Payload), die ein Anwendungsserver über einen Push-Dienst an eine PushSubscription geschickt hat. Das Ereignis wird ausschließlich im Service Worker ausgelöst, und zwar über self.addEventListener("push", handler) oder die Eigenschaft self.onpush.
Der Rückgabewert ist ein PushMessageData-Objekt. Damit kannst du die Daten in verschiedenen Formaten auslesen: text() für einen String, json() für ein geparstes Objekt, arrayBuffer() und bytes() für Binärdaten sowie blob() für ein Blob. Anders als bei Response laufen diese Methoden synchron und lassen sich mehrfach aufrufen.
Wurde die Nachricht ohne Payload gesendet (ein sogenannter „Tickle“-Push), ist data gleich null. Robuster Code prüft deshalb immer zuerst, ob Daten vorhanden sind. Typischerweise wertest du die Daten in einem Aufruf von event.waitUntil() aus und zeigst dort mit self.registration.showNotification() eine Benachrichtigung an.
Rückgabewert
PushMessageData-Objekt mit den Nutzdaten der Nachricht oder null, wenn die Nachricht ohne Payload gesendet wurde.Beispiele
JSON-Payload lesen und Benachrichtigung anzeigen (addEventListener)
// sw.js – Service Worker
self.addEventListener("push", (event) => {
// Standardwerte, falls keine oder ungültige Daten ankommen
let payload = { title: "Neue Nachricht", body: "Du hast ein Update." };
if (event.data) {
try {
payload = event.data.json();
} catch {
payload.body = event.data.text();
}
}
event.waitUntil(
self.registration.showNotification(payload.title, {
body: payload.body,
icon: "/icons/icon-192.png",
data: { url: payload.url ?? "/" }
})
);
});Text-Payload über die onpush-Eigenschaft
// sw.js
self.onpush = (event) => {
const text = event.data?.text() ?? "(keine Daten)";
console.log("Push empfangen:", text);
event.waitUntil(
self.registration.showNotification("Info", { body: text })
);
};Tickle-Push ohne Daten: aktuelle Inhalte nachladen
// sw.js
self.addEventListener("push", (event) => {
if (event.data === null) {
// Keine Payload: Daten selbst vom Server holen
event.waitUntil((async () => {
const res = await fetch("/api/notifications/latest");
const { title, body } = await res.json();
await self.registration.showNotification(title, { body });
})());
return;
}
const bytes = new Uint8Array(event.data.arrayBuffer());
console.log(`Binär-Payload mit ${bytes.length} Bytes`);
});// Wichtig · Fallstricke
- Auf
nullprüfen: Ohne Payload istevent.datagleichnull. Ein direkter Aufruf wieevent.data.json()wirft dann einenTypeError. json()kann fehlschlagen: Bei ungültigem JSON wirft die Methode einenSyntaxError. Fange diesen Fehler mittry/catchab.- Synchrone Methoden:
PushMessageData.json(),text()usw. liefern ihren Wert direkt zurück und kein Promise. Einawaitist hier nicht nötig. - Verschlüsselung: Payloads müssen nach RFC 8291 (Message Encryption for Web Push) verschlüsselt sein und benötigen VAPID-Schlüssel. Bibliotheken wie
web-pushfür Node.js übernehmen das. Die meisten Push-Dienste erlauben nur etwa 4 KB Nutzdaten. - Sichtbare Benachrichtigung: Chrome und Safari verlangen
userVisibleOnly: truebeim Abonnieren. Jeder Push muss dann eine Benachrichtigung anzeigen, sonst zeigt der Browser eine allgemeine Meldung an oder entzieht das Abonnement. waitUntilverwenden: Ohneevent.waitUntil()kann der Browser den Service Worker beenden, bevor die Verarbeitung abgeschlossen ist.- Sicherheit: Behandle Payload-Inhalte als nicht vertrauenswürdig. Übernimm z. B. URLs aus der Payload nicht ungeprüft für
clients.openWindow(). - Kompatibilität: Die Push-API funktioniert nur in sicheren Kontexten (HTTPS). Unter iOS/iPadOS gibt es sie erst ab 16.4 und nur für Web-Apps, die zum Home-Bildschirm hinzugefügt wurden.