Notifications API verwenden

Mit der chrome.notifications API können Sie Benachrichtigungen mithilfe von Vorlagen erstellen und diese Benachrichtigungen für Nutzer in der Taskleiste des Nutzers anzeigen:

Aussehen

Es gibt vier verschiedene Arten von Benachrichtigungen: Standard, Bild, Liste und Fortschritt. Alle Benachrichtigungen enthalten einen Titel, eine Nachricht, ein kleines Symbol links neben der Benachrichtigung und das Feld contextMessage, das als drittes Textfeld in einer helleren Farbe angezeigt wird.

Eine allgemeine Benachrichtigung:

In Listenbenachrichtigungen wird eine beliebige Anzahl von Listenelementen angezeigt:

Bildbenachrichtigungen enthalten eine Bildvorschau:

Fortschrittsbenachrichtigungen enthalten eine Fortschrittsanzeige:

Verhalten

Unter ChromeOS werden Benachrichtigungen in der Taskleiste des 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.

Den Benachrichtigungen kann eine Priorität zwischen -2 und 2 zugewiesen werden. Prioritäten unter 0 werden im ChromeOS-Benachrichtigungscenter 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. Außerdem können mehr Benachrichtigungen mit hoher Priorität in der Taskleiste angezeigt werden.

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

Neben dem Anzeigen von Informationen können alle Benachrichtigungstypen bis zu zwei Aktionselemente enthalten. Klickt ein Nutzer auf eine Aufgabe, kann die Erweiterung mit der passenden Aktion reagieren. Wenn der Nutzer beispielsweise auf Antworten klickt, wird die E-Mail-App geöffnet und er kann die Antwort abschließen:

So werden sie entwickelt

Um diese API zu verwenden, rufen Sie die Methode notifications.create() auf und übergeben Sie die Benachrichtigungsdetails mit dem Parameter options:

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

Das notifications.NotificationOptions muss einen notifications.TemplateType enthalten, in dem verfügbare Benachrichtigungsdetails und die Anzeige der Details 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 umfasst auch ein imageUrl-Element, das einen Link zu einem Bild darstellt, das in der Benachrichtigung als Vorschau angezeigt wird. Beachte, dass Bilder Nutzern unter macOS nicht 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 Event-Listener und Event-Handler enthalten, die auf Nutzeraktionen reagieren (siehe chrome.events). So können Sie beispielsweise einen Event-Handler schreiben, der auf ein notifications.onButtonClicked-Ereignis reagiert.

Event-Listener:

chrome.notifications.onButtonClicked.addListener(replyBtnClick);

Event-Handler:

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

Schließen Sie gegebenenfalls Event-Listener und -Handler in den Service Worker ein, damit Benachrichtigungen auch dann eingeblendet werden, wenn die Erweiterung nicht ausgeführt wird.