Notifications API und Berechtigungen

Notification.permission ist ein statischer String, der den aktuellen Berechtigungsstatus angibt. Er kann "granted" (Benutzer hat erlaubt), "denied" (Benutzer hat blockiert) oder "default" (noch nie angefragt) sein. Prüfen Sie diese Eigenschaft, bevor Sie Benachrichtigungen anzeigen, um unnötige Fehler zu vermeiden.

Notification.requestPermission() gibt ein Promise zurück, das mit dem neuen Berechtigungs-String aufgelöst wird. Rufen Sie die Methode nur als Reaktion auf eine eindeutige Benutzeraktion auf, nicht beim Laden der Seite. Browser ignorieren oder unterdrücken Berechtigungsdialoge, die unmittelbar beim Laden erscheinen, und Benutzer empfinden sie ohne entsprechenden Kontext als störend.

Am effektivsten ist es, zunächst in der App einen Hinweis anzuzeigen, der den Nutzen erklärt, und den Benutzer dann auf „Benachrichtigungen aktivieren“ klicken zu lassen, bevor Sie requestPermission() aufrufen. So erhält der Benutzer Kontext, die Akzeptanzrate steigt und der Browser stuft Ihre Website seltener als Spam ein. Fordern Sie die Berechtigung niemals beim Laden der Seite an.

new Notification(title, options) erstellt und zeigt eine Systembenachrichtigung an. Das erste Argument ist der Titel-String. Das options-Objekt ist das zweite Argument und akzeptiert Eigenschaften wie body (Text des Untertitels), icon (Bild-URL) und tag zur Deduplizierung. Dies funktioniert nur, wenn die Berechtigung "granted" lautet.

Zu den wichtigsten Optionen für Benachrichtigungen gehören: body für beschreibenden Text unterhalb des Titels, icon für ein kleines Bild, badge für das kleine monochrome Symbol im Benachrichtigungsbereich des Betriebssystems, image für ein großes eingebettetes Bild, tag, um eine vorherige Benachrichtigung mit demselben Tag zu ersetzen, und requireInteraction: true, damit die Benachrichtigung angezeigt bleibt, bis der Benutzer darauf reagiert.

Die Notification-Instanz löst mehrere Ereignisse aus: onclick wird ausgelöst, wenn der Benutzer auf die Benachrichtigung klickt (verwenden Sie es, um das Fenster zu fokussieren und zu navigieren), onclose wird beim Schließen ausgelöst und onerror, wenn beim Erstellen ein Problem auftritt. Hängen Sie Handler nach dem Aufruf von new Notification() an die zurückgegebene Instanz an.

Speichern Sie die zurückgegebene Notification-Instanz in einer Variablen und rufen Sie notification.close() auf, um sie programmgesteuert zu schließen. Das ist nützlich für zeitkritische Benachrichtigungen, die nach einer gewissen Zeit nicht mehr relevant sind. Kombinieren Sie dies mit setTimeout, um die Benachrichtigung nach einigen Sekunden automatisch zu schließen.

Die Notifications API erfordert einen sicheren Kontext. Auf HTTP-Seiten ist typeof Notification === 'undefined' erfüllt oder die API je nach Browser vollständig deaktiviert. Das ist eine Sicherheitsmaßnahme, um zu verhindern, dass bösartige Websites Benutzer mit gefälschten Systemnachrichten überfluten. Prüfen Sie vor der Verwendung immer, ob die API verfügbar ist.

Ein useNotifications-Hook kann zwei Methoden bereitstellen: requestPermission() und showNotification(title, options). Intern verfolgt er den aktuellen Berechtigungsstatus und aktualisiert ihn nach der Anfrage. Komponenten können showNotification aufrufen, ohne sich um Berechtigungsprüfungen zu kümmern, da der Hook diese intern übernimmt.

Die Page Visibility API stellt document.hidden und das Ereignis visibilitychange bereit. Benachrichtigungen sind am sinnvollsten, wenn der Benutzer den Tab nicht gerade betrachtet. Prüfen Sie document.hidden === true, bevor Sie eine Benachrichtigung anzeigen, um überflüssige Hinweise zu vermeiden, wenn sich die Seite bereits im Vordergrund befindet.

Die hier gezeigte Notifications API ist für lokal von der Seite selbst ausgelöste Benachrichtigungen vorgesehen. Für Push-Benachrichtigungen, die auch bei geschlossener Seite eintreffen, benötigen Sie die Push API in Verbindung mit einem Service Worker. Der Service Worker empfängt das Push-Ereignis und ruft self.registration.showNotification() im Hintergrund auf.

Welcher der folgenden Werte ist KEIN gültiger Wert für Notification.permission?

Notification.permission kann granted, denied oder default sein. Fordern Sie die Berechtigung immer bei einer Benutzeraktion an, nicht beim Laden der Seite. Verwenden Sie new Notification(title, options), um Benachrichtigungen zu erstellen, und behandeln Sie onclick, um das Fenster zu fokussieren. Kombinieren Sie dies mit der Visibility API, damit Benachrichtigungen nur angezeigt werden, wenn der Tab ausgeblendet ist.