API de notifications enrichies

L'API de notifications enrichies vous permet de créer des notifications à l'aide de modèles et de les afficher dans la barre d'état système de l'utilisateur:

Aperçu

Il existe quatre types de notifications enrichies: de base, d'image, de liste et de progression. Toutes les notifications incluent un titre, un message, une petite icône affichée à gauche du message de notification et un champ contextMessage, qui s'affiche comme un troisième champ de texte dans une police de couleur plus claire.

Une image de base:

Les notifications de liste affichent un nombre illimité d'éléments:

Les notifications d'images incluent un aperçu de l'image:

Les notifications de progression affichent une barre de progression:

Comment elles se comportent

Sous ChromeOS, les notifications s'affichent dans la barre d'état système de l'utilisateur et restent dans cette barre jusqu'à ce que l'utilisateur les ferme. La barre d'état système affiche le nombre de nouvelles notifications. Lorsqu'un utilisateur voit les notifications dans la barre d'état système, le nombre est réinitialisé.

La priorité des notifications peut être comprise entre -2 et 2. Les priorités inférieures à 0 s'affichent dans le centre de notification de ChromeOS et génèrent une erreur sur d'autres plates-formes. La priorité par défaut est 0. Les priorités supérieures à 0 sont affichées pour augmenter la durée, et davantage de notifications à priorité élevée peuvent être affichées dans la barre d'état système.

En plus d'afficher des informations, tous les types de notifications peuvent inclure jusqu'à deux tâches. Lorsque les utilisateurs cliquent sur une action à effectuer, votre application peut répondre en fournissant l'action appropriée. Par exemple, lorsque l'utilisateur clique sur "Répondre", l'application de messagerie s'ouvre et peut finaliser la réponse:

Comment les développer

Pour utiliser cette API, appelez la méthode notifications.create, en transmettant les détails de la notification via le paramètre options:

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

Les options notifications.NotificationOptions doivent inclure un élément notifications.TemplateType, qui définit les détails de notification disponibles et la manière dont ils sont affichés.

Créer une notification de base

Tous les types de modèles (basic, image, list et progress) doivent inclure une notification title et message, ainsi qu'un élément iconUrl, qui est un lien vers une petite icône affichée à gauche du message de notification.

Voici un exemple de modèle basic:

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

Créer une notification d'image

Le type de modèle image inclut également un élément imageUrl, qui est un lien vers une image prévisualisée dans la notification:

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

Dans les applications Chrome, en raison d'une Content Security Policy stricte, ces URL doivent renvoyer vers une ressource locale ou utiliser une URL blob ou de données. Utilisez le format 3:2, sinon une bordure noire encadrera l'image.

Notification de création de liste

Le modèle list affiche items sous forme de liste:

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

Créer une notification de progression

Le modèle progress affiche une barre de progression dans laquelle la progression actuelle varie de 0 à 100:

var opt = {
  type: "progress",
  title: "Primary Title",
  message: "Primary message to display",
  iconUrl: "url_to_small_icon",
  progress: 42
}

Écouter les événements et y répondre

Toutes les notifications peuvent inclure des écouteurs d'événements et des gestionnaires d'événements qui répondent aux actions des utilisateurs (voir chrome.events). Par exemple, vous pouvez écrire un gestionnaire d'événements pour répondre à un événement notifications.onButtonClicked.

Écouteur d'événements:

chrome.notifications.onButtonClicked.addListener(replyBtnClick);

Gestionnaire d'événements:

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

Pensez à inclure des écouteurs et des gestionnaires d'événements dans la page d'événement, afin que les notifications puissent s'afficher même lorsque l'application ou l'extension n'est pas en cours d'exécution.