Notification.requestPermission() — Methode · JavaScript-Referenz

Signatur

Notification.requestPermission(deprecatedCallback)

Beschreibung

Notification.requestPermission() ist eine statische Methode der Notification-Schnittstelle. Sie öffnet den Berechtigungsdialog des Browsers, in dem der Benutzer entscheidet, ob die Seite (genauer: ihr Ursprung) Benachrichtigungen über das Betriebssystem anzeigen darf. Ohne erteilte Berechtigung schlägt new Notification() bzw. ServiceWorkerRegistration.showNotification() fehl.

Der Rückgabewert ist ein Promise, das mit einem von drei Zeichenketten erfüllt wird:

"granted" – der Benutzer hat zugestimmt.
"denied" – der Benutzer hat abgelehnt; der Browser fragt in der Regel nicht erneut.
"default" – der Dialog wurde ohne Entscheidung geschlossen; das wird wie eine Ablehnung behandelt, erneutes Fragen ist aber möglich.

Moderne Browser zeigen den Dialog nur nach einer Benutzeraktion (etwa einem Klick) an. Ruft man die Methode direkt beim Laden auf, blockieren Chrome, Firefox und Safari den Dialog oft still oder zeigen nur ein unauffälliges Symbol in der Adressleiste. Am besten fragt man deshalb erst, wenn klar ist, wozu die Benachrichtigungen dienen, zum Beispiel über einen Button „Benachrichtigungen aktivieren“.

Den aktuellen Zustand liest man ohne Dialog über die statische Eigenschaft Notification.permission aus. Sie sollte man vor jedem Aufruf prüfen, damit Benutzer nicht unnötig gefragt werden.

Parameter

Name	Typ	Default	Beschreibung
$deprecatedCallback	function(permission: string): void		Veraltet. Optionale Rückruffunktion, die mit dem Berechtigungsstatus aufgerufen wird. Stammt aus der Zeit vor der Promise-API und sollte nur noch als Rückfall für sehr alte Safari-Versionen (vor 15) genutzt werden.

Rückgabewert

Typ

Promise<"granted" | "denied" | "default">

Beschreibung

Ein Promise, das mit dem Berechtigungsstatus als Zeichenkette erfüllt wird. Ist die Entscheidung schon gefallen (granted oder denied), wird es sofort ohne Dialog mit diesem Wert erfüllt.

Beispiele

Berechtigung per Button-Klick anfragen

const button = document.querySelector('#notify-btn');

button.addEventListener('click', async () => {
  if (!('Notification' in window)) {
    console.log('Benachrichtigungen werden nicht unterstützt.');
    return;
  }

  const permission = await Notification.requestPermission();
  console.log('Status:', permission);

  if (permission === 'granted') {
    new Notification('Danke!', {
      body: 'Sie erhalten jetzt Benachrichtigungen.',
      icon: '/icons/bell.png'
    });
  }
});

Status: granted

Nur fragen, wenn noch keine Entscheidung gefallen ist

const ensureNotificationPermission = async () => {
  if (!('Notification' in window)) return false;

  switch (Notification.permission) {
    case 'granted':
      return true;
    case 'denied':
      // Erneutes Fragen ist zwecklos – Hinweis auf Browser-Einstellungen geben
      console.warn('Benachrichtigungen wurden blockiert.');
      return false;
    default:
      return (await Notification.requestPermission()) === 'granted';
  }
};

document.querySelector('#subscribe').addEventListener('click', async () => {
  const ok = await ensureNotificationPermission();
  console.log(ok ? 'Bereit für Benachrichtigungen' : 'Keine Berechtigung');
});

Bereit für Benachrichtigungen

Benachrichtigung über einen Service Worker anzeigen

document.querySelector('#enable-push').addEventListener('click', async () => {
  const permission = await Notification.requestPermission();
  if (permission !== 'granted') return;

  const registration = await navigator.serviceWorker.register('/sw.js');
  await navigator.serviceWorker.ready;

  await registration.showNotification('Neue Nachricht', {
    body: 'Sie haben 3 ungelesene Nachrichten.',
    tag: 'inbox',
    badge: '/icons/badge.png'
  });
});

Rückfall für alte Browser mit Callback-Variante

const requestPermissionCompat = () =>
  new Promise((resolve) => {
    const result = Notification.requestPermission(resolve);
    // Moderne Browser liefern ein Promise zurück
    if (result && typeof result.then === 'function') {
      result.then(resolve);
    }
  });

document.querySelector('#notify-btn').addEventListener('click', async () => {
  const permission = await requestPermissionCompat();
  console.log(permission);
});

granted

// Wichtig · Fallstricke

Nur in sicherem Kontext: Die API steht nur über HTTPS (oder localhost) zur Verfügung.
Benutzeraktion nötig: Firefox (ab 72) und Safari verlangen, dass der Aufruf in einem Klick- oder Tasten-Ereignis erfolgt. Chrome stuft Seiten herunter, die direkt beim Laden fragen, und zeigt dann nur eine „leise“ Anfrage an.
„denied“ ist endgültig: Nach einer Ablehnung zeigt der Browser keinen Dialog mehr an. Nur der Benutzer kann das in den Website-Einstellungen ändern. Weisen Sie in der Oberfläche darauf hin, statt wiederholt zu fragen.
iFrames: Aus Cross-Origin-iFrames heraus wird die Anfrage in modernen Browsern blockiert.
iOS/iPadOS: Safari unterstützt Web-Benachrichtigungen erst ab iOS 16.4 und nur für Web-Apps, die zum Home-Bildschirm hinzugefügt wurden.
Worker: In Web Workern gibt es requestPermission() nicht. Die Berechtigung muss im Hauptdokument angefragt werden.
Der Status lässt sich auch über navigator.permissions.query({ name: 'notifications' }) abfragen und mit dem change-Ereignis beobachten.

Siehe auch

Notification Notification.permission ServiceWorkerRegistration.prototype.showNotification() Permissions.prototype.query() PushManager.prototype.subscribe() DeviceMotionEvent.requestPermission()