Notifications API verwenden

Mit der chrome.notifications API können Sie Vorlagen verwenden, um Benachrichtigungen zu erstellen und diese anzeigen zu lassen. Benachrichtigungen an Nutzer in der Taskleiste des Nutzers:

Aussehen

Umfangreiche Benachrichtigungen gibt es in vier Varianten: „Einfach“, „Bild“, „Liste“ und „Fortschritt“. Alle Benachrichtigungen enthalten einen Titel, eine Nachricht und ein kleines Symbol, das links neben der Benachrichtigung angezeigt wird. Nachricht und ein contextMessage-Feld, das als drittes Textfeld in hellerer Farbe angezeigt wird.

Eine allgemeine Benachrichtigung:

Listenbenachrichtigungen enthalten eine beliebige Anzahl von Listeneinträgen:

Bildbenachrichtigungen beinhalten eine Bildvorschau:

In den Fortschrittsbenachrichtigungen wird eine Fortschrittsanzeige eingeblendet:

Verhalten

Unter ChromeOS werden Benachrichtigungen in der Taskleiste des Nutzers angezeigt. Sie bleiben dort, bis das Symbol Nutzer schließt sie. In der Taskleiste werden alle neuen Benachrichtigungen aufgeführt. Sobald Nutzende die angezeigt wird, wird der Zähler auf null zurückgesetzt.

Benachrichtigungen kann eine Priorität zwischen -2 und 2 zugewiesen werden. Prioritäten mit weniger als 0 werden in ChromeOS angezeigt und auf anderen Plattformen einen Fehler verursachen. 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.

Die Einstellung priority hat keinen Einfluss auf die Reihenfolge der Benachrichtigungen unter macOS.

Alle Benachrichtigungstypen können nicht nur Informationen anzeigen, sondern auch bis zu zwei Aktionselemente enthalten. Klickt ein Nutzer auf eine Aufgabe, kann die Erweiterung die entsprechende Aktion auslösen. Beispiel: Wenn der Nutzer auf Antworten klickt, wird die E-Mail-App geöffnet und der Nutzer kann die Antwort abschließen:

So entwickeln Sie sie

Rufen Sie zur Verwendung dieser API die Methode notifications.create() auf und übergeben Sie die Benachrichtigungsdetails mithilfe von options:

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

notifications.NotificationOptions muss einen notifications.TemplateType enthalten, der definiert die verfügbaren Benachrichtigungsdetails und wie diese angezeigt werden.

Grundlegende Benachrichtigung erstellen

Alle Vorlagentypen (basic, image, list und progress) müssen eine Benachrichtigung title und message sowie ein iconUrl-Objekt, bei dem es sich um einen Link zu einem kleinen Symbol handelt, das links von in der Benachrichtigung.

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 ein imageUrl, also einen Link zu einem Bild, das in der Vorschau angezeigt wird in der Benachrichtigung. Beachte, dass Nutzern unter macOS keine Bilder angezeigt werden.

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 einem Listenformat angezeigt. Beachten Sie, dass Nutzern unter macOS nur das erste Element angezeigt wird.

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 Ereignis-Listener und Event-Handler enthalten, die auf Nutzeraktionen (siehe chrome.events) Sie können z. B. einen Event-Handler schreiben, der auf einen notifications.onButtonClicked-Ereignis.

Event-Listener:

chrome.notifications.onButtonClicked.addListener(replyBtnClick);

Event-Handler:

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

Erwägen Sie die Aufnahme von Event-Listener und Handler innerhalb des Service Workers, sodass Benachrichtigungen selbst wenn die Erweiterung nicht ausgeführt wird.