Notification.permission — Eigenschaft · JavaScript-Referenz

Signatur

Notification.permission

Beschreibung

Notification.permission ist eine statische Eigenschaft. Man liest sie also direkt an der Klasse Notification ab, nicht an einer Instanz. Sie gibt synchron zurück, welche Entscheidung der Benutzer für den aktuellen Ursprung (Protokoll + Host + Port) getroffen hat, und löst dabei keinen Dialog aus.

Mögliche Werte:

"granted": Der Benutzer hat Benachrichtigungen ausdrücklich erlaubt. new Notification() bzw. ServiceWorkerRegistration.showNotification() funktionieren.
"denied": Der Benutzer hat abgelehnt. Die Seite kann dann keine Benachrichtigungen anzeigen und den Dialog auch nicht noch einmal öffnen.
"default": Es wurde noch nicht entschieden. Der Browser behandelt das wie "denied", Sie dürfen aber mit Notification.requestPermission() fragen.

Typischer Einsatz: Prüfen Sie den Status vor jeder Anfrage oder Anzeige. So vermeiden Sie unnötige Dialoge, können einen eigenen Button „Benachrichtigungen aktivieren“ nur bei "default" einblenden und bei "denied" einen Hinweis zeigen, wie der Benutzer die Einstellung im Browser ändern kann.

Rückgabewert

Typ

"granted" | "denied" | "default"

Beschreibung

Ein String mit dem aktuellen Berechtigungsstatus für Benachrichtigungen auf diesem Ursprung.

Beispiele

Status vor dem Anzeigen einer Benachrichtigung prüfen

const notify = (title, body) => {
  if (!('Notification' in window)) {
    console.log('Benachrichtigungen werden nicht unterstützt.');
    return;
  }
  if (Notification.permission === 'granted') {
    new Notification(title, { body });
  } else {
    console.log(`Keine Anzeige, Status: ${Notification.permission}`);
  }
};

notify('Upload fertig', 'Ihre Datei wurde hochgeladen.');

Keine Anzeige, Status: default

Berechtigung nur nach Klick und nur bei "default" anfragen

const button = document.querySelector('#enable-notifications');

const updateUi = () => {
  button.hidden = Notification.permission !== 'default';
};

button.addEventListener('click', async () => {
  const result = await Notification.requestPermission();
  console.log('Entscheidung:', result);
  console.log('permission jetzt:', Notification.permission);
  updateUi();
});

updateUi();

Entscheidung: granted permission jetzt: granted

Auf spätere Änderungen reagieren (Permissions API)

const watchPermission = async () => {
  const status = await navigator.permissions.query({ name: 'notifications' });
  // Achtung: Die Permissions API liefert 'prompt' statt 'default'
  console.log('Start:', status.state, '/', Notification.permission);

  status.addEventListener('change', () => {
    console.log('Geändert auf:', Notification.permission);
  });
};

watchPermission();

Start: prompt / default

// Wichtig · Fallstricke

Nur lesbar: Eine Zuweisung wie Notification.permission = 'granted' wird stillschweigend ignoriert, im Strict Mode wirft sie einen TypeError. Ändern lässt sich der Status nur über Notification.requestPermission() oder durch den Benutzer in den Browser-Einstellungen.
Statisch: Eine Instanz hat keine Eigenschaft permission, new Notification(...).permission ergibt undefined.
Feature-Erkennung: Prüfen Sie vorher mit 'Notification' in window. In manchen Umgebungen fehlt die Klasse ganz, und ein direkter Zugriff wirft einen ReferenceError, z. B. in iOS-Safari außerhalb einer installierten Web-App oder in einigen WebViews.
Sicherer Kontext: Benachrichtigungen gibt es nur über HTTPS (oder localhost). In ursprungsübergreifenden iframes melden Browser oft "denied".
Unterschied zur Permissions API: navigator.permissions.query({ name: 'notifications' }) liefert "prompt" statt "default".
Nutzerfreundlichkeit: Chrome und Firefox blockieren oder dämpfen Anfragen ohne Benutzeraktion. Ist der Status "denied", lässt er sich per Skript nicht mehr umkehren. Fragen Sie deshalb nie direkt beim Laden der Seite.
Im Service Worker können Sie Notification.permission ebenfalls lesen. requestPermission() gibt es dort aber nicht.

Siehe auch

Notification Permissions.query() LayoutShiftAttribution.previousRect Notification.navigate Notification.icon