API de notifications enrichies

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

Aperçu

Les notifications enrichies se présentent sous quatre formes: de base, d'image, de liste et de progression. Tout Les notifications incluent un titre, un message, une petite icône affichée à gauche de la notification et un champ contextMessage, affiché en tant que 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 d'image:

Les notifications de progression affichent une barre de progression:

Leur comportement

Sous ChromeOS, les notifications s'affichent dans la barre d'état système de l'utilisateur et y restent jusqu'à ce que l'icône l'utilisateur les ferme. La barre d'état système affiche le nombre de toutes les nouvelles notifications. Une fois qu'un utilisateur notifications dans la barre d'état système, le compteur est remis à zéro.

Vous pouvez attribuer une priorité comprise entre -2 et 2 aux notifications. Priorités < 0 sont affichées dans ChromeOS centre de notifications, et génèrent une erreur sur d’autres plateformes. La priorité 0 est la priorité par défaut. Priorités > 0 s'affichent pour augmenter la durée et davantage de notifications à priorité élevée peuvent être affiché 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 tâche, votre application peut y répondre en fournissant l'action appropriée. Par exemple : Lorsque l'utilisateur clique sur "Répondre", l'application de messagerie s'ouvre et l'utilisateur peut répondre:

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 leur affichage.

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 que iconUrl, qui est un lien vers une petite icône affichée à gauche de le 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 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 adresse ressource ou utiliser une URL de blob ou de données. Utilisez le format 3:2 pour votre image. Sinon, une bordure noire encadre l'image.

Créer une notification 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 où la progression actuelle est comprise entre 0 et 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 à une 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 sur la page des événements, afin que les notifications peuvent s'afficher même lorsque l'application ou l'extension n'est pas en cours d'exécution.