Notifications API verwenden

Mit der browser.notifications API können Sie Benachrichtigungen mithilfe von Vorlagen erstellen und sie Nutzern in der Taskleiste des Nutzers anzeigen:

So sehen sie aus

Rich Notifications gibt es in vier verschiedenen Varianten: einfach, Bild, Liste und Fortschritt. Alle Benachrichtigungen enthalten einen Titel, eine Nachricht, ein kleines Symbol links neben der Benachrichtigungsnachricht und das Feld contextMessage, das als drittes Textfeld in einer helleren Schriftfarbe angezeigt wird.

Eine einfache Benachrichtigung:

In List-Benachrichtigungen kann eine beliebige Anzahl von Listenelementen angezeigt werden:

Bildbenachrichtigungen enthalten eine Bildvorschau:

In Fortschrittsbenachrichtigungen wird eine Fortschrittsanzeige eingeblendet:

Wie sie sich verhalten

Unter ChromeOS werden Benachrichtigungen in der Taskleiste eines Nutzers angezeigt und bleiben dort, bis der Nutzer sie schließt. In der Taskleiste wird die Anzahl aller neuen Benachrichtigungen angezeigt. Sobald ein Nutzer die Benachrichtigungen in der Taskleiste sieht, wird die Anzahl auf null zurückgesetzt.

Benachrichtigungen kann eine Priorität zwischen -2 und 2 zugewiesen werden. Prioritäten unter 0 werden in der ChromeOS-Benachrichtigungszentrale angezeigt und führen auf anderen Plattformen zu einem Fehler. Die Standardpriorität ist 0. Prioritäten über 0 werden für eine längere Dauer angezeigt und es können mehr Benachrichtigungen mit hoher Priorität in der Taskleiste angezeigt werden.

Die Einstellung priority wirkt sich nicht auf die Reihenfolge der Benachrichtigungen unter macOS aus.

Zusätzlich zur Anzeige von Informationen können alle Benachrichtigungstypen bis zu zwei Aktionen enthalten. Wenn Nutzer auf ein Action-Element klicken, kann Ihre Erweiterung mit der entsprechenden Aktion reagieren. Wenn der Nutzer beispielsweise auf Antworten klickt, wird die E‑Mail-App geöffnet und der Nutzer kann die Antwort fertigstellen:

So entwickeln Sie sie

Rufen Sie die Methode notifications.create() auf, um diese API zu verwenden. Übergeben Sie die Benachrichtigungsdetails mit dem Parameter options:

await browser.notifications.create(id, options);

Das notifications.NotificationOptions muss ein notifications.TemplateType enthalten, in dem die verfügbaren Benachrichtigungsdetails und die Art ihrer Darstellung definiert werden.

Einfache Benachrichtigung erstellen

Alle Vorlagentypen (basic, image, list und progress) müssen eine Benachrichtigung title und message sowie eine iconUrl enthalten. Dabei handelt es sich um einen Link zu einem kleinen Symbol, das links neben der Benachrichtigung angezeigt wird.

Hier ein Beispiel für eine basic-Vorlage:

var opt = {
  type: "basic",
  title: "Primary Title",
  message: "Primary message to display",
  iconUrl: "url_to_small_icon"
}

Bild verwenden

Der Vorlagentyp image enthält auch imageUrl, einen Link zu einem Bild, das in der Benachrichtigung in der Vorschau angezeigt wird. Bilder werden Nutzern unter macOS nicht angezeigt.

var opt = {
  type: "image",
  title: "Primary Title",
  message: "Primary message to display",
  iconUrl: "url_to_small_icon",
  imageUrl: "url_to_preview_image"
}

Listenbenachrichtigung erstellen

In der Vorlage list wird items in Listenform angezeigt. Unter macOS wird Nutzern nur das erste Element angezeigt.

var opt = {
  type: "list",
  title: "Primary Title",
  message: "Primary message to display",
  iconUrl: "url_to_small_icon",
  items: [{ title: "Item1", message: "This is item 1."},
          { title: "Item2", message: "This is item 2."},
          { title: "Item3", message: "This is item 3."}]
}```

### Create progress notification {: #progress }

The `progress` template displays a progress bar where current progress ranges from 0 to 100. On macOS the progress bar displays as a percentage value in the notification title instead of in the progress bar.

```js
var opt = {
  type: "progress",
  title: "Primary Title",
  message: "Primary message to display",
  iconUrl: "url_to_small_icon",
  progress: 42
}

Auf Ereignisse warten und darauf reagieren

Alle Benachrichtigungen können Event-Listener und Event-Handler enthalten, die auf Nutzeraktionen reagieren (siehe browser.events). Sie können beispielsweise einen Event-Handler schreiben, der auf ein notifications.onButtonClicked-Ereignis reagiert.

Event-Listener:

browser.notifications.onButtonClicked.addListener(replyBtnClick);

Event-Handler:

function replyBtnClick {
    //Write function to respond to user action.
}

Erwägen Sie, Event-Listener und ‑Handler in den Service Worker aufzunehmen, damit Benachrichtigungen auch dann angezeigt werden können, wenn die Erweiterung nicht ausgeführt wird.