API für Rich-Benachrichtigungen

Mit der Rich Notifications API können Sie mithilfe von Vorlagen Benachrichtigungen erstellen und diese 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. message und ein contextMessage-Feld, das als drittes Textfeld in einer helleren Schriftart angezeigt wird.

Ein einfaches Bild:

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 < In ChromeOS werden 0 angezeigt und auf anderen Plattformen einen Fehler verursachen. Priorität 0 ist die Standardpriorität. Prioritäten > 0 werden angezeigt, wenn die Dauer verlängert wird, und es können mehr Benachrichtigungen mit hoher Priorität in der Taskleiste angezeigt.

Alle Benachrichtigungstypen können nicht nur Informationen anzeigen, sondern auch bis zu zwei Aktionselemente enthalten. Wenn Nutzer auf eine Aufgabe klicken, kann Ihre App mit der entsprechenden Aktion reagieren. 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 über options-Parameter:

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

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"
}

Bildbenachrichtigung erstellen

Der Vorlagentyp image enthält auch ein imageUrl, also einen Link zu einem Bild, das in der Vorschau angezeigt wird in der Benachrichtigung:

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

Aufgrund einer strengen Content Security Policy müssen diese URLs in Chrome-Apps auf eine lokale Ressource oder verwenden Sie eine Blob- oder Daten-URL. Verwenden Sie ein Seitenverhältnis von 3:2. andernfalls schwarzer Rahmen um das Bild einzurahmen.

Listenbenachrichtigung erstellen

In der Vorlage list wird items in einem Listenformat 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."}]
}

Fortschrittsbenachrichtigung erstellen

In der Vorlage progress wird eine Fortschrittsanzeige angezeigt, in der der aktuelle Fortschritt zwischen 0 und 100 liegt:

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 ausführen.

Event-Listener:

chrome.notifications.onButtonClicked.addListener(replyBtnClick);

Event-Handler:

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

Sie können Event-Listener und Handler auf der Ereignisseite einbinden, damit Benachrichtigungen selbst wenn die App oder Erweiterung nicht ausgeführt wird.