Notification.maxActions — Eigenschaft · JavaScript-Referenz

Signatur

Notification.maxActions

Beschreibung

Notification.maxActions ist eine statische Eigenschaft des Notification-Konstruktors. Man liest sie also direkt am Konstruktor ab und nicht an einer Instanz. Der Wert ist eine ganze Zahl und sagt, wie viele Einträge aus dem Array actions der Browser bzw. das Betriebssystem in einer Benachrichtigung tatsächlich als Schaltflächen darstellt.

Aktionen gibt es nur bei persistenten Benachrichtigungen, die man über ServiceWorkerRegistration.prototype.showNotification() anzeigt. Ein Klick auf eine Aktion löst im Service Worker das Ereignis notificationclick aus. Die Eigenschaft event.action enthält dann den Bezeichner der gewählten Aktion. Übergibt man mehr Aktionen, als maxActions erlaubt, zeigt der Browser die überzähligen ohne Meldung einfach nicht an.

In der Praxis dient die Eigenschaft dazu, das Aktions-Array vor dem Anzeigen zu kürzen oder die wichtigsten Aktionen nach vorne zu sortieren. Außerdem kann man eine Ersatzlösung anbieten, etwa einen Klick auf die ganze Benachrichtigung, der eine Auswahlseite öffnet. Das ist sinnvoll, wenn gar keine Aktionen unterstützt werden (Wert 0 oder Eigenschaft nicht vorhanden).

Rückgabewert

Typ

number

Beschreibung

Nicht-negative ganze Zahl: die höchste Anzahl an Aktionen, die angezeigt werden kann. In Chromium-Desktop-Browsern ist der Wert meist 2. In Browsern ohne Unterstützung ist die Eigenschaft undefined.

Beispiele

Unterstützung und Grenzwert abfragen

// Statisch am Konstruktor ablesen, nicht an einer Instanz
const max = 'maxActions' in Notification ? Notification.maxActions : 0;
console.log(`Maximal ${max} Aktionen pro Benachrichtigung`);

Maximal 2 Aktionen pro Benachrichtigung

Aktionen passend kürzen und über den Service Worker anzeigen

const zeigeBestellHinweis = async () => {
  const erlaubnis = await Notification.requestPermission();
  if (erlaubnis !== 'granted') return;

  // Nach Wichtigkeit sortiert – wichtigste zuerst
  const alleAktionen = [
    { action: 'bestaetigen', title: 'Bestätigen' },
    { action: 'spaeter', title: 'Später erinnern' },
    { action: 'details', title: 'Details ansehen' }
  ];

  const max = Notification.maxActions ?? 0;
  const registrierung = await navigator.serviceWorker.ready;

  await registrierung.showNotification('Neue Bestellung', {
    body: 'Bestellung #4711 wartet auf Freigabe.',
    actions: alleAktionen.slice(0, max),
    data: { url: '/bestellungen/4711' }
  });

  console.log(`${Math.min(max, alleAktionen.length)} von ${alleAktionen.length} Aktionen angezeigt`);
};

zeigeBestellHinweis();

2 von 3 Aktionen angezeigt

Aktionen im Service Worker auswerten (sw.js)

self.addEventListener('notificationclick', (event) => {
  event.notification.close();

  switch (event.action) {
    case 'bestaetigen':
      event.waitUntil(fetch('/api/bestellungen/4711/freigeben', { method: 'POST' }));
      break;
    case 'spaeter':
      // z. B. später erneut erinnern
      break;
    default:
      // Klick auf die Benachrichtigung selbst – Ersatzlösung, falls Aktionen fehlen
      event.waitUntil(clients.openWindow(event.notification.data.url));
  }
});

// Wichtig · Fallstricke

Experimentell und nur eingeschränkt verfügbar: Nur Chromium-basierte Browser unterstützen die Eigenschaft. In Firefox und Safari ist sie undefined. Deshalb immer mit 'maxActions' in Notification oder ?? 0 absichern.
Statisch: new Notification(...).maxActions ergibt undefined. Richtig ist nur Notification.maxActions.
Aktionen funktionieren nur mit showNotification() über einen Service Worker. Übergibt man actions an new Notification(), wird ein TypeError ausgelöst.
Der Wert kann je nach Plattform und Betriebssystem unterschiedlich sein, etwa zwischen Desktop und Android. Deshalb nie einen festen Wert annehmen.
Zu viele Aktionen führen zu keinem Fehler. Die überzähligen werden einfach nicht angezeigt. Also die wichtigsten Aktionen an den Anfang des Arrays stellen.
Die Eigenschaft ist auch im Service-Worker-Kontext verfügbar. Man kann sie also direkt vor self.registration.showNotification() abfragen.

Siehe auch

Notification Notification.actions NavigationTransition.to Notification.icon Notification.data