Signatur
Beschreibung
Die schreibgeschützte Eigenschaft actions des Notification-Interfaces gibt die Aktionen zurück, die der Benutzer direkt in der Benachrichtigung auswählen kann, zum Beispiel „Antworten“, „Archivieren“ oder „Später erinnern“. Der Wert entspricht dem, was beim Erstellen der Benachrichtigung im Options-Objekt unter actions angegeben wurde.
Jeder Eintrag ist ein Objekt mit diesen Feldern:
action– eine eindeutige Kennung (String), mit der du die geklickte Aktion später erkennst.title– der Text, der auf der Schaltfläche angezeigt wird.icon– optional, die URL eines Symbols für die Schaltfläche.
Aktionen gibt es nur bei persistenten Benachrichtigungen, also solchen, die ein Service Worker über ServiceWorkerRegistration.showNotification() anzeigt. Welche Schaltfläche geklickt wurde, erfährst du im Service Worker über das Event notificationclick in der Eigenschaft event.action. Hat der Benutzer auf die Benachrichtigung selbst statt auf eine Schaltfläche geklickt, ist event.action ein leerer String.
Wie viele Aktionen das System höchstens anzeigt, verrät die statische Eigenschaft Notification.maxActions. Überzählige Einträge werden ignoriert, bleiben aber in actions erhalten.
Rückgabewert
[]).Beispiele
Benachrichtigung mit Aktionen über den Service Worker anzeigen
// Im Seitenskript (main.js)
const zeigeNachricht = async () => {
const permission = await Notification.requestPermission();
if (permission !== 'granted') return;
const registration = await navigator.serviceWorker.ready;
await registration.showNotification('Neue Nachricht von Anna', {
body: 'Hast du heute Abend Zeit?',
tag: 'chat-42',
actions: [
{ action: 'reply', title: 'Antworten', icon: '/icons/reply.png' },
{ action: 'mute', title: 'Stummschalten' }
]
});
console.log('Maximal angezeigte Aktionen:', Notification.maxActions);
};
zeigeNachricht();Aktionen bestehender Benachrichtigungen auslesen
const listeAktionen = async () => {
const registration = await navigator.serviceWorker.ready;
const notifications = await registration.getNotifications({ tag: 'chat-42' });
for (const n of notifications) {
const titel = n.actions.map(({ title }) => title);
console.log(`${n.title}: ${titel.join(', ')}`);
}
};
listeAktionen();Klick auf eine Aktion im Service Worker auswerten
// Im Service Worker (sw.js)
self.addEventListener('notificationclick', (event) => {
const { notification, action } = event;
notification.close();
// Prüfen, ob die geklickte Aktion tatsächlich definiert war
const bekannt = notification.actions.some((a) => a.action === action);
if (action === 'reply' && bekannt) {
event.waitUntil(clients.openWindow('/chat/42?reply=1'));
} else if (action === 'mute') {
console.log('Chat 42 stummgeschaltet');
} else {
// action === '' → Klick auf die Benachrichtigung selbst
event.waitUntil(clients.openWindow('/chat/42'));
}
});// Wichtig · Fallstricke
- Nur mit Service Worker: Gibst du
actionsim Konstruktornew Notification()an, wirft der Browser einenTypeError. Aktionen funktionieren nur mitServiceWorkerRegistration.showNotification(). - Schreibgeschützt: Das zurückgegebene Array ist eingefroren. Nachträglich ändern lässt es sich nicht. Um andere Aktionen anzuzeigen, zeigst du die Benachrichtigung mit demselben
tagneu an. - Browser-Unterstützung: Die Eigenschaft ist experimentell und wird derzeit nur von Chromium-basierten Browsern unterstützt. In Firefox und Safari ist
actionsundefinedoder wird ignoriert. Prüfe das vorher, z. B. mit'actions' in Notification.prototype, und biete eine Alternative an, etwa einen Klick auf die Benachrichtigung, der eine Seite öffnet. - Anzahl begrenzt:
Notification.maxActionsist oft nur 2. Wie Symbole und Schaltflächen aussehen, bestimmt das Betriebssystem. Manche Systeme blendeniconkomplett aus. - Verlasse dich nicht darauf, dass eine Aktion wirklich angezeigt wurde. Die wichtigste Funktion sollte immer auch über einen normalen Klick erreichbar sein.