Mit der Rich Notifications API können Sie Benachrichtigungen mithilfe von Vorlagen erstellen und Nutzern diese Benachrichtigungen in der Taskleiste des Nutzers anzeigen:
Aussehen
Es gibt vier verschiedene Arten von ausführlichen Benachrichtigungen: Standard, Bild, Liste und Fortschritt. Alle Benachrichtigungen enthalten einen Titel, eine Nachricht, ein kleines Symbol links neben der Benachrichtigung und ein contextMessage-Feld, das als drittes Textfeld in einer helleren Farbe angezeigt wird.
Ein einfaches Bild:
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 eines Nutzers angezeigt und verbleiben 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 < 0 werden in der ChromeOS-Benachrichtigungszentrale angezeigt und führen auf anderen Plattformen zu einem Fehler. Priorität 0 ist die Standardpriorität. Prioritäten > 0 werden für eine längere Dauer angezeigt. Weitere Benachrichtigungen mit hoher Priorität können in der Taskleiste angezeigt werden.
Alle Benachrichtigungstypen können nicht nur Informationen anzeigen, sondern bis zu zwei Aktionselemente 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 abschließen:
So werden sie entwickelt
Rufen Sie zur Verwendung dieser API die Methode notifications.create auf und übergeben Sie die Benachrichtigungsdetails über den Parameter options:
chrome.notifications.create(id, options, creationCallback);
notifications.NotificationOptions müssen einen notifications.TemplateType enthalten, der die verfügbaren Benachrichtigungsdetails und die Anzeige dieser Details definiert.
Allgemeine 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-Element, das einen Link zu einem Bild darstellt, das innerhalb der Benachrichtigung als 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"
}
In Chrome-Apps müssen diese URLs aufgrund einer strengen Content Security Policy auf eine lokale Ressource verweisen oder eine Blob- oder Daten-URL verwenden. Verwenden Sie ein Seitenverhältnis von 3:2. Andernfalls wird es von einem schwarzen Rahmen umrandet.
Benachrichtigung zum Erstellen einer Liste
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
Die Vorlage progress zeigt eine Fortschrittsanzeige an, 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 reagieren (siehe chrome.events). Sie können beispielsweise einen Event-Handler schreiben, der auf ein notifications.onButtonClicked-Ereignis reagiert.
Event-Listener:
chrome.notifications.onButtonClicked.addListener(replyBtnClick);
Ereignis-Handler:
function replyBtnClick {
//Write function to respond to user action.
}
Fügen Sie der Ereignisseite Ereignis-Listener und -Handler hinzu, damit Benachrichtigungen auch dann eingeblendet werden können, wenn die App oder Erweiterung nicht ausgeführt wird.