API für Rich-Benachrichtigungen

Mit der API für Rich Notifications können Sie Benachrichtigungen mithilfe von Vorlagen erstellen und sie Nutzern in der Taskleiste des Nutzers anzeigen lassen:

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.

Ein einfaches Bild:

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 < 0 werden in der ChromeOS-Benachrichtigungszentrale angezeigt und führen auf anderen Plattformen zu einem Fehler. Die Standardpriorität ist „0“. Prioritäten > 0 werden für eine längere Dauer angezeigt und es können mehr Benachrichtigungen mit hoher Priorität in der Taskleiste angezeigt werden.

Alle Benachrichtigungstypen können neben der Anzeige von Informationen bis zu zwei Aktionen enthalten. Wenn Nutzer auf eine Aufgabe klicken, kann Ihre App 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 zum Verwenden dieser API die Methode notifications.create auf und übergeben Sie die Benachrichtigungsdetails über den Parameter options:

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

notifications.NotificationOptions muss einen notifications.TemplateType enthalten, der die verfügbaren Benachrichtigungsdetails und die Art ihrer Darstellung definiert.

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

Bildbenachrichtigung erstellen

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

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 verweisen oder eine Blob- oder Daten-URL verwenden. Verwenden Sie für Ihr Bild ein Seitenverhältnis von 3:2. Andernfalls wird das Bild mit einem schwarzen Rahmen versehen.

Listenbenachrichtigung erstellen

In der Vorlage list wird items in Listenform 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 mit einem aktuellen Fortschritt zwischen 0 und 100 % angezeigt:

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). Sie können beispielsweise einen Event-Handler schreiben, der auf das Ereignis notifications.onButtonClicked reagiert.

Event-Listener:

chrome.notifications.onButtonClicked.addListener(replyBtnClick);

Event-Handler:

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

Fügen Sie Event-Listener und ‑Handler auf der Ereignisseite ein, damit Benachrichtigungen auch dann angezeigt werden können, wenn die App oder Erweiterung nicht ausgeführt wird.