Verwenden der Notifications API

Einer der offensichtlichsten Anwendungsfälle für Web-Benachrichtigungen ist eine webbasierte Mail- oder IRC-Anwendung, die den Benutzer benachrichtigen muss, wenn eine neue Nachricht eingeht, selbst wenn der Benutzer etwas anderes mit einer anderen Anwendung macht. Viele Beispiele dafür existieren bereits, wie zum Beispiel Slack.

Wir haben ein praxisnahes Beispiel - eine To-Do-Liste-App - geschrieben, um Ihnen eine bessere Vorstellung davon zu geben, wie Web-Benachrichtigungen verwendet werden können. Es speichert Daten lokal mithilfe von IndexedDB und benachrichtigt Benutzer, wenn Aufgaben fällig sind, mit Systembenachrichtigungen. Laden Sie den To-Do-Listen-Code herunter oder sehen Sie sich die App live an.

Bevor eine App eine Benachrichtigung senden kann, muss der Benutzer der Anwendung das Recht dazu gewähren. Dies ist eine häufige Anforderung, wenn eine API versucht, mit etwas außerhalb einer Webseite zu interagieren – mindestens einmal muss der Benutzer der betreffenden Anwendung ausdrücklich die Erlaubnis erteilen, Benachrichtigungen anzuzeigen, wodurch der Benutzer steuern kann, welche Apps/Sites Benachrichtigungen anzeigen dürfen.

Aufgrund von Missbräuchen bei Push-Benachrichtigungen in der Vergangenheit haben Webbrowser und Entwickler begonnen, Strategien zu implementieren, um dieses Problem zu mildern. Sie sollten die Zustimmung zur Anzeige von Benachrichtigungen nur als Reaktion auf eine Benutzeraktion anfordern (z.B. durch Klicken auf einen Button). Dies ist nicht nur bewährte Praxis – Sie sollten Benutzer nicht mit Benachrichtigungen belästigen, denen sie nicht zugestimmt haben – sondern in Zukunft werden Browser explizit Benachrichtigungserlaubnisanfragen verbieten, die nicht als Reaktion auf eine Benutzeraktion ausgelöst werden. Firefox tut dies ab Version 72 bereits, und Safari hat dies schon seit einiger Zeit getan.

Zusätzlich können Sie in Chrome und Firefox Benachrichtigungen nur anfordern, wenn die Seite ein sicherer Kontext ist (d.h. HTTPS), und Sie können nicht mehr erlauben, dass Benachrichtigungserlaubnisse von cross-origin <iframe>s angefordert werden.

Sie können überprüfen, ob Sie bereits die Erlaubnis haben, indem Sie den Wert der schreibgeschützten Eigenschaft Notification.permission überprüfen. Es kann einen von drei möglichen Werten haben:

default

Der Benutzer wurde noch nicht um Erlaubnis gefragt, daher werden Benachrichtigungen nicht angezeigt.

granted

Der Benutzer hat die Erlaubnis zur Anzeige von Benachrichtigungen erteilt, nachdem er zuvor gefragt wurde.

denied

Der Benutzer hat ausdrücklich abgelehnt, Benachrichtigungen anzuzeigen.

Wenn die Erlaubnis zur Anzeige von Benachrichtigungen noch nicht erteilt wurde, muss die Anwendung die Methode Notification.requestPermission() verwenden, um diese beim Benutzer anzufordern. In seiner einfachsten Form fügen wir einfach Folgendes ein:

Notification.requestPermission().then((result) => {
  console.log(result);
});

Dies verwendet die auf Versprechen basierende Version der Methode. Wenn Sie ältere Versionen unterstützen möchten, müssen Sie möglicherweise die ältere Rückrufversion verwenden, die so aussieht:

Notification.requestPermission((result) => {
  console.log(result);
});

Die Rückrufversion akzeptiert optional eine Rückruffunktion, die aufgerufen wird, sobald der Benutzer auf die Anforderung zur Anzeige von Berechtigungen reagiert hat.

In unserem Demo für die To-Do-Liste haben wir einen "Benachrichtigungen aktivieren"-Button, der beim Drücken die Benachrichtigungserlaubnisse für die App anfordert.

<button id="enable">Enable notifications</button>

Durch Klicken darauf wird die askNotificationPermission()-Funktion aufgerufen:

function askNotificationPermission() {
  // Check if the browser supports notifications
  if (!("Notification" in window)) {
    console.log("This browser does not support notifications.");
    return;
  }
  Notification.requestPermission().then((permission) => {
    // set the button to shown or hidden, depending on what the user answers
    notificationBtn.style.display = permission === "granted" ? "none" : "block";
  });
}

Wenn Sie sich zuerst den zweiten Hauptblock ansehen, werden Sie sehen, dass wir zunächst überprüfen, ob Benachrichtigungen unterstützt werden. Wenn sie unterstützt werden, führen wir die auf Promises basierende Version von Notification.requestPermission() aus, und wenn nicht, protokollieren wir eine Nachricht in der Konsole.

Im Promise-Auflösungs-Handler, der an then übergeben wird, zeigen oder verbergen wir den Button, je nachdem, was der Benutzer im Berechtigungsdialogbox gewählt hat. Wir möchten ihn nicht anzeigen, wenn die Erlaubnis bereits erteilt wurde, aber falls der Benutzer sich entschieden hat, die Erlaubnis zu verweigern, möchten wir ihm die Möglichkeit geben, seine Meinung später zu ändern.

Eine Benachrichtigung zu erstellen ist einfach; verwenden Sie einfach den Notification Konstruktor. Dieser Konstruktor erwartet einen Titel zur Anzeige innerhalb der Benachrichtigung und einige Optionen, um die Benachrichtigung zu verbessern, wie ein icon oder ein Text body.

Zum Beispiel verwenden wir im To-Do-Listen-Beispiel das folgende Snippet, um bei Bedarf eine Benachrichtigung zu erstellen (im Inneren der createNotification()-Funktion gefunden):

const img = "/to-do-notifications/img/icon-128.png";
const text = `HEY! Your task "${title}" is now overdue.`;
const notification = new Notification("To do list", { body: text, icon: img });

Verwenden Sie close(), um eine Benachrichtigung zu entfernen, die für den Benutzer nicht mehr relevant ist (z.B. der Benutzer hat die Benachrichtigung auf der Webseite bereits gelesen, im Falle einer Messaging-App, oder das folgende Lied spielt schon in einer Musik-App, die bei Liedwechseln benachrichtigt). Die meisten modernen Browser blenden Benachrichtigungen automatisch nach wenigen Momenten (ungefähr vier Sekunden) aus, aber das sollte im Allgemeinen kein großes Problem sein, da es vom Benutzer und dem User-Agent abhängt. Die Abweisung kann auch auf der Betriebssystemebene erfolgen und die Benutzer sollten dies kontrollieren können. Alte Versionen von Chrome haben Benachrichtigungen nicht automatisch entfernt, daher können Sie dies nach einem setTimeout() nur für diese Legacy-Versionen tun, um nicht Benachrichtigungen aus den Benachrichtigungsbereichen in anderen Browsern zu entfernen.

const n = new Notification("My Great Song");
document.addEventListener("visibilitychange", () => {
  if (document.visibilityState === "visible") {
    // The tab has become visible so clear the now-stale Notification.
    n.close();
  }
});

Es gibt vier Ereignisse, die bei der Notification-Instanz ausgelöst werden:

click

Wird ausgelöst, wenn der Benutzer auf die Benachrichtigung klickt.

close

Wird ausgelöst, sobald die Benachrichtigung geschlossen wird.

error

Wird ausgelöst, falls mit der Benachrichtigung etwas schiefgeht; dies liegt in der Regel daran, dass die Benachrichtigung aus irgendeinem Grund nicht angezeigt werden konnte.

show

Wird ausgelöst, wenn die Benachrichtigung dem Benutzer angezeigt wird.

Diese Ereignisse können mit den Handlern onclick, onclose, onerror und onshow verfolgt werden. Da Notification auch von EventTarget erbt, ist es möglich, die Methode addEventListener() darauf zu verwenden.

Es ist in der Regel unerwünscht, dass ein Benutzer in kurzer Zeit viele Benachrichtigungen erhält – zum Beispiel, was wäre, wenn eine Messenger-Anwendung einen Benutzer bei jeder eingehenden Nachricht benachrichtigen würde und viele gesendet würden? Um zu vermeiden, den Benutzer mit zu vielen Benachrichtigungen zu überschwemmen, ist es möglich, die ausstehenden Benachrichtigungen zu ändern, indem man einzelne oder mehrere ausstehende Benachrichtigungen mit einer neuen ersetzt.

Dazu ist es möglich, einer neuen Benachrichtigung ein Tag hinzuzufügen. Wenn eine Benachrichtigung bereits dasselbe Tag hat und noch nicht angezeigt wurde, ersetzt die neue Benachrichtigung diese vorherige Benachrichtigung. Wenn die Benachrichtigung mit demselben Tag bereits angezeigt wurde, wird die vorherige Benachrichtigung geschlossen und die neue angezeigt.

Nehmen Sie das folgende einfache HTML an:

<button id="notify">Notify me!</button>
<section id="demo-logs"></section>

#demo-logs {
  width: 90%;
  height: 100px;
  background-color: #ddd;
  overflow-x: auto;
  padding: 10px;
  margin-top: 10px;
}

Es ist möglich, mehrere Benachrichtigungen auf diese Weise zu handhaben:

const demoLogs = document.querySelector("#demo-logs");

window.addEventListener("load", () => {
  const button = document.querySelector("#notify");

  button.addEventListener("click", () => {
    if (Notification?.permission === "granted") {
      demoLogs.innerText += `The site has permission to show notifications. Showing notifications.\n`;
      // If the user agreed to get notified
      // Let's try to send ten notifications
      let i = 0;
      // Using an interval cause some browsers (including Firefox) are blocking notifications if there are too much in a certain time.
      const interval = setInterval(() => {
        // Thanks to the tag, we should only see the "Hi no 9 from MDN." notification
        const n = new Notification(`Hi no ${i} from MDN.`, {
          tag: "soManyNotification",
        });
        if (i === 9) {
          clearInterval(interval);
        }
        i++;
      }, 200);
    } else if (Notification?.permission !== "denied") {
      demoLogs.innerText += "Requesting notification permission.\n";
      // If the user hasn't told if they want to be notified or not
      // Note: because of Chrome, we are not sure the permission property
      // is set, therefore it's unsafe to check for the "default" value.
      Notification.requestPermission().then((status) => {
        // If the user said okay
        if (status === "granted") {
          demoLogs.innerText +=
            "User granted the permission. Sending notifications.\n";
          let i = 0;
          // Using an interval cause some browsers (including Firefox) are blocking notifications if there are too much in a certain time.
          const interval = setInterval(() => {
            // Thanks to the tag, we should only see the "Message no 9 from MDN." notification
            const n = new Notification(`Message no ${i} from MDN.`, {
              tag: "soManyNotification",
            });
            if (i === 9) {
              clearInterval(interval);
            }
            i++;
          }, 200);
        } else {
          // Otherwise, we can fallback to a regular modal alert
          demoLogs.innerText += `User denied the permission request.\n`;
        }
      });
    } else {
      // If the user refuses to get notified, we can fallback to a regular modal alert
      demoLogs.innerText += `The site does not have permission to show notifications.\n`;
    }
  });
});

Um das obige Beispiel zu testen, ändern Sie die mitteilungseinstellung sendenerlaubnis für die Website https://live.mdnplay.dev.

• Notification