Signatur
Beschreibung
Mit new PushEvent() erzeugen Sie ein PushEvent-Objekt. Das Interface erbt von ExtendableEvent und steht daher nur im Service-Worker-Kontext (ServiceWorkerGlobalScope) zur Verfügung. Im normalen Fenster-Kontext ist PushEvent nicht definiert.
Im Alltag erzeugt der Browser PushEvent-Objekte selbst, wenn ein Push-Dienst eine Nachricht zustellt, und liefert sie an den push-Handler. Den Konstruktor brauchen Sie deshalb vor allem für Tests: Sie können ein Push-Ereignis mit eigenen Nutzdaten nachbauen und per self.dispatchEvent() auslösen, ohne einen echten Push-Server zu bemühen.
Über das Feld data im Optionsobjekt legen Sie die Nutzdaten fest. Sie stehen danach als PushMessageData in event.data bereit und lassen sich mit .text(), .json(), .arrayBuffer() oder .blob() auslesen. Wird data weggelassen, ist event.data gleich null.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $type Pflicht | string | Name des Ereignisses, üblicherweise "push". |
|
| $options | object | {} | Optionales Initialisierungsobjekt. Enthält neben den EventInit-Feldern (bubbles, cancelable, composed) die Eigenschaft data: Nutzdaten vom Typ string, ArrayBuffer, TypedArray oder DataView, die als event.data bereitgestellt werden. |
Rückgabewert
PushEvent-Objekt, dessen Eigenschaft data ein PushMessageData-Objekt oder null ist.Beispiele
PushEvent mit JSON-Nutzdaten erzeugen (im Service Worker)
// sw.js
const payload = JSON.stringify({ title: 'Neue Nachricht', body: 'Hallo Welt!' });
const event = new PushEvent('push', { data: payload });
console.log(event.type);
console.log(event.data.json().title);Push-Handler lokal testen per dispatchEvent
// sw.js
self.addEventListener('push', (event) => {
const daten = event.data ? event.data.json() : { title: 'Ohne Inhalt' };
event.waitUntil(
self.registration.showNotification(daten.title, { body: daten.body ?? '' })
);
});
// Test: simuliertes Push-Ereignis auslösen
const testEvent = new PushEvent('push', {
data: JSON.stringify({ title: 'Test-Push', body: 'Lokal ausgelöst' })
});
self.dispatchEvent(testEvent);Binäre Nutzdaten und Event ohne Daten
// sw.js
const bytes = new TextEncoder().encode('Status: OK');
const binEvent = new PushEvent('push', { data: bytes });
console.log(binEvent.data.text());
const leer = new PushEvent('push');
console.log(leer.data);// Wichtig · Fallstricke
- Nur im Service Worker: Im Fenster- oder Worker-Kontext wirft
new PushEvent()einenReferenceError, weil das Interface dort fehlt. - Synthetische Ereignisse: Ein von Hand erzeugtes
PushEventhatisTrusted === false. MitdispatchEvent()ausgelöst, ist es ein reines Testwerkzeug. Beim Push-Dienst kommt es nicht an, undwaitUntil()verlängert die Lebensdauer des Service Workers dabei nicht zuverlässig. - Nutzdaten auslesen:
event.data.json()wirft einenSyntaxError, wenn die Daten kein gültiges JSON sind. Prüfen Sieevent.datavorher aufnull. - Kompatibilität: Safari unterstützt die Push API erst seit Version 16 (macOS) bzw. 16.4 (iOS, nur für installierte Web-Apps). Echte Push-Nachrichten brauchen einen sicheren Kontext (HTTPS) und die Zustimmung der Nutzerin oder des Nutzers zu Benachrichtigungen.
- Zum manuellen Testen bieten die Chrome DevTools unter Application → Service Workers eine Schaltfläche „Push“, die ein echtes Push-Ereignis auslöst.