Signatur
Beschreibung
Der Konstruktor NotificationEvent() erzeugt ein Ereignisobjekt vom Typ NotificationEvent. Diese Schnittstelle erweitert ExtendableEvent. Sie steht nur im Service-Worker-Kontext (ServiceWorkerGlobalScope) zur Verfügung. Im Fenster-Kontext ist NotificationEvent nicht definiert.
Normalerweise erzeugt der Browser solche Ereignisse selbst: notificationclick, wenn jemand auf eine Benachrichtigung oder einen ihrer Aktions-Buttons klickt, und notificationclose, wenn sie geschlossen wird. Selbst ruft man den Konstruktor vor allem in Unit-Tests für die Handler auf, oder wenn man die Klick-Logik absichtlich per self.dispatchEvent() auslösen will, etwa um Code wiederzuverwenden.
Das Pflichtfeld notification im Optionsobjekt muss ein echtes Notification-Objekt sein. Im Service Worker bekommt man es in der Regel über self.registration.getNotifications(). Mit new Notification() geht das dort nicht, denn der Aufruf wirft im Service Worker einen TypeError.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $type Pflicht | string | Name des Ereignisses, üblicherweise "notificationclick" oder "notificationclose". Groß- und Kleinschreibung werden unterschieden. |
|
| $options Pflicht | NotificationEventInit | Objekt zur Initialisierung. Zusätzlich zu den Feldern aus ExtendableEventInit (bubbles, cancelable, composed, alle standardmäßig false) gibt es:
|
Rückgabewert
NotificationEvent. Seine Eigenschaften notification und action enthalten die übergebenen Werte, und es erbt waitUntil() von ExtendableEvent.Beispiele
Ereignis mit einer bestehenden Benachrichtigung erzeugen
// sw.js – läuft im Service Worker
const createClickEvent = async () => {
const [notification] = await self.registration.getNotifications({ tag: 'chat' });
if (!notification) return null;
const event = new NotificationEvent('notificationclick', {
notification,
action: 'reply'
});
console.log(event.type, event.action, event.notification.tag);
return event;
};
createClickEvent();Klick-Handler per dispatchEvent wiederverwenden
// sw.js
self.addEventListener('notificationclick', (event) => {
event.notification.close();
const url = event.action === 'open-inbox' ? '/inbox' : '/';
event.waitUntil(self.clients.openWindow(url));
});
// Nachricht aus der Seite: "so tun, als wäre geklickt worden"
self.addEventListener('message', async (msg) => {
if (msg.data?.type !== 'simulate-click') return;
const [notification] = await self.registration.getNotifications();
if (notification) {
self.dispatchEvent(new NotificationEvent('notificationclick', {
notification,
action: 'open-inbox'
}));
}
});Handler-Logik testen, ohne dass eine Aktion gewählt wurde
// sw.js – einfacher Selbsttest
const handleClose = (event) => {
console.log(`Geschlossen: ${event.notification.title} (Aktion: "${event.action}")`);
};
self.addEventListener('notificationclose', handleClose);
const runSelfTest = async () => {
await self.registration.showNotification('Test-Hinweis', { tag: 'selftest' });
const [notification] = await self.registration.getNotifications({ tag: 'selftest' });
self.dispatchEvent(new NotificationEvent('notificationclose', { notification }));
};
runSelfTest();// Wichtig · Fallstricke
- Nur im Service Worker verfügbar: Im Fenster- oder Worker-Kontext ist
NotificationEventnicht definiert. Wer es dort verwendet, bekommt einenReferenceError. notificationist Pflicht: Fehlt das Feld oder ist es keinNotification-Objekt, wirft der Konstruktor einenTypeError. Das Objekt holt man überregistration.getNotifications().new Notification()ist im Service Worker nicht erlaubt.- Selbst erzeugte Ereignisse sind nicht „vertrauenswürdig“:
event.isTrustedistfalse. Der Browser wertet sie nicht als Nutzerinteraktion. Deshalb schlagenclients.openWindow()undWindowClient.focus()in der Regel fehl (InvalidAccessError), weil dafür eine echte Nutzeraktion nötig ist. waitUntil()darf man nur aufrufen, solange das Ereignis gerade verarbeitet wird. Sonst gibt es einenInvalidStateError. Bei selbst ausgelösten Ereignissen verlängert der Aufruf die Lebensdauer des Service Workers nicht zuverlässig.- Kompatibilität: Chromium-Browser und Firefox unterstützen den Konstruktor seit Langem. Safari unterstützt ihn ab Version 16 (macOS) bzw. 16.4 (iOS, nur bei installierten Web-Apps). Die Eigenschaft
replygab es nur in älteren Chrome-Versionen, sie ist nicht standardisiert.