API de notifications enrichies

Différence entre les plates-formes : Dans Chrome 59, les notifications s'affichent différemment pour les utilisateurs de Mac OS X. Au lieu des notifications propres à Chrome, les utilisateurs voient les notifications natives de Mac OS X. Pour en savoir plus, consultez cet article.

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

Notifications dans la barre d'état système

Apparence

Les notifications enrichies se présentent sous quatre formes différentes : de base, image, liste et 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 sous la forme d'un troisième champ de texte dans une police de couleur plus claire.

Image de base :

Notification de base

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

Notification de liste

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

Notification d'image

Les notifications de progression affichent une barre de progression :

Notification de progression

Comportement

Dans ChromeOS, les notifications s'affichent dans la barre d'état système d'un utilisateur et y restent jusqu'à ce que l'utilisateur les ignore. La barre d'état système comptabilise toutes les nouvelles notifications. Une fois que l'utilisateur a vu les notifications dans la barre d'état système, le compteur est réinitialisé à zéro.

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

En plus d'afficher des informations, tous les types de notification peuvent inclure jusqu'à deux éléments d'action. Lorsque les utilisateurs cliquent sur un élément d'action, votre application peut répondre avec l'action appropriée. Par exemple, lorsque l'utilisateur clique sur "Répondre", l'application de messagerie s'ouvre et l'utilisateur peut terminer la réponse :

Action dans la notification

Développement

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

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

Les notifications.NotificationOptions doivent inclure un notifications.TemplateType, qui définit les détails de notification disponibles et la façon dont ils sont affichés.

Créer une notification de base

Tous les types de modèle (basic, image, list et progress) doivent inclure un title et un message de notification, ainsi qu'un 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 imageUrl, qui est un lien vers une image dont l'aperçu s'affiche dans la notification :

Différence entre les plates-formes : Les images ne s'affichent pas pour les utilisateurs de Chrome 59 ou version ultérieure sur Mac OS X.
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 stratégie de sécurité du contenu stricte, ces URL doivent pointer vers une ressource locale ou utiliser une URL blob ou de données. Utilisez un rapport 3:2 pour votre image. Sinon, une bordure noire l'encadre.

Créer une notification de liste

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

Différence entre les plates-formes : Seul le premier élément de la liste s'affiche pour les utilisateurs de Chrome 59 ou version ultérieure sur Mac OS X.
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 dont la progression actuelle est comprise entre 0 et 100 :

Différence entre les plates-formes : Dans Chrome 59 ou version ultérieure sur Mac OS X, la barre de progression s'affiche sous forme de pourcentage dans le titre de la notification au lieu d'une barre de progression.
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 de l'utilisateur (voir chrome.events). Par exemple, vous pouvez écrire un gestionnaire d'événements pour répondre à un notifications.onButtonClicked.

Écouteur d'événements :

chrome.notifications.onButtonClicked.addListener(replyBtnClick);

Gestionnaire d'événements :

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

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