Signatur
Beschreibung
Die Eigenschaft action des NotificationEvent-Interfaces enthält den Wert action aus dem Eintrag im Array actions, der bei ServiceWorkerRegistration.showNotification() übergeben wurde. So erkennt der Service Worker im notificationclick-Handler, welche Schaltfläche der Benutzer angeklickt hat, etwa „Antworten“, „Archivieren“ oder „Später erinnern“.
Klickt der Benutzer auf die Benachrichtigung selbst und nicht auf eine Aktionsschaltfläche, ist action ein leerer String (""). Daher gehört in jeden Handler ein Standardzweig, der diesen Fall abdeckt. Meist wird dort die zugehörige Seite geöffnet oder in den Vordergrund geholt.
Die Eigenschaft gibt es nur im Service-Worker-Kontext, weil NotificationEvent nur dort ausgelöst wird. Bei Benachrichtigungen, die mit new Notification() im Fensterkontext erzeugt werden, sind keine Aktionsschaltflächen möglich. Deshalb gibt es dort auch kein Gegenstück zu action.
Rückgabewert
action-ID der angeklickten Schaltfläche oder "", wenn der Benutzer auf die Benachrichtigung selbst geklickt hat.Beispiele
Benachrichtigung mit Aktionsschaltflächen anzeigen
// Im Service Worker, z. B. nach einem Push-Ereignis
self.addEventListener('push', (event) => {
const data = event.data?.json() ?? { title: 'Neue Nachricht', text: '', id: 0 };
event.waitUntil(
self.registration.showNotification(data.title, {
body: data.text,
tag: `msg-${data.id}`,
data: { messageId: data.id },
actions: [
{ action: 'reply', title: 'Antworten' },
{ action: 'archive', title: 'Archivieren' }
]
})
);
});Angeklickte Aktion im notificationclick-Handler auswerten
self.addEventListener('notificationclick', (event) => {
const { messageId } = event.notification.data ?? {};
event.notification.close();
const handle = async () => {
switch (event.action) {
case 'reply':
await clients.openWindow(`/nachrichten/${messageId}?antworten=1`);
break;
case 'archive':
await fetch(`/api/nachrichten/${messageId}/archivieren`, { method: 'POST' });
break;
default:
// Leerer String: Klick auf die Benachrichtigung selbst
await clients.openWindow(`/nachrichten/${messageId}`);
}
};
event.waitUntil(handle());
});Vorhandenes Fenster fokussieren statt ein neues zu öffnen
self.addEventListener('notificationclick', (event) => {
event.notification.close();
console.log('Aktion:', event.action || '(keine – Hauptbereich angeklickt)');
const url = event.action === 'settings' ? '/einstellungen' : '/';
event.waitUntil((async () => {
const windows = await clients.matchAll({ type: 'window', includeUncontrolled: true });
const existing = windows.find((c) => new URL(c.url).pathname === url);
if (existing) {
await existing.focus();
} else {
await clients.openWindow(url);
}
})());
});// Wichtig · Fallstricke
- Leerer String statt
null: Ohne angeklickte Schaltfläche istactiongleich"". Prüfe mitif (!event.action)oder mit einemdefault-Zweig, nicht mit=== null. - Anzahl der Schaltflächen begrenzt: Browser und Betriebssysteme zeigen nur eine begrenzte Zahl von Aktionen an, siehe
Notification.maxActions(oft 2). Überzählige Einträge fallen stillschweigend weg. Wichtige Funktionen sollten deshalb auch über den Standardklick erreichbar sein. - Unterstützung: Aktionsschaltflächen sind nicht überall verfügbar. Unter iOS/iPadOS gibt es Web-Push nur für Web-Apps, die auf dem Home-Bildschirm installiert sind. Manche Plattformen zeigen Aktionen gar nicht an, dann kommt immer nur
""an. waitUntilverwenden: Asynchrone Arbeit wieclients.openWindow()oderfetch()gehört inevent.waitUntil(), sonst kann der Browser den Service Worker vorzeitig beenden.openWindow()ist außerdem nur während der Benutzeraktivierung durch den Klick erlaubt.- Sicherheit:
actionist nur eine ID, die du selbst festgelegt hast. Kritische Operationen (Löschen, Bezahlen) sollten trotzdem serverseitig autorisiert werden und nicht allein über einen Klick in der Benachrichtigung laufen. - Für Inline-Antworten gibt es in Chromium zusätzlich
NotificationEvent.replyin Verbindung mittype: 'text'. Das ist nicht standardisiert und nicht browserübergreifend verfügbar.