L'API chrome.notifications vous permet de créer des notifications à l'aide de modèles et de les afficher dans la barre d'état système des utilisateurs:
Apparence
Il existe quatre types de notifications enrichies: standard, 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 en tant que troisième champ de texte dans une police de couleur plus claire.
Une notification basique:
Les notifications de liste affichent un nombre indéfini d'éléments de liste:
Les notifications d'image 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 le restent jusqu'à ce que l'utilisateur les ferme. La barre d'état système affiche le nombre total de nouvelles notifications. Une fois qu'un utilisateur voit les notifications dans la barre d'état système, le décompte est remis à zéro.
Vous pouvez attribuer une priorité de -2 à 2 pour les notifications. Les priorités inférieures à 0 s'affichent dans le centre de notification de 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 s'affichent lorsque la durée augmente, et davantage de notifications à priorité élevée peuvent être affichées dans la barre d'état système.
Le paramètre priority n'affecte pas l'ordre des notifications sous macOS.
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 extension 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 l'utilisateur peut répondre au message:
Comment les développer
Pour utiliser cette API, appelez la méthode notifications.create(), en transmettant les détails de la notification à l'aide du paramètre options:
await chrome.notifications.create(id, options);
Le notifications.NotificationOptions doit inclure un 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"
}
Utiliser une image
Le type de modèle image inclut également un élément imageUrl, qui correspond à un lien vers une image prévisualisée dans la notification. Notez que les images ne sont pas visibles par les utilisateurs de macOS.
var opt = {
type: "image",
title: "Primary Title",
message: "Primary message to display",
iconUrl: "url_to_small_icon",
imageUrl: "url_to_preview_image"
}
Créer une notification de liste
Le modèle list affiche items sous forme de liste. Notez que seul le premier élément s'affiche pour les utilisateurs de macOS.
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."}]
}```
### Create progress notification {: #progress }
The `progress` template displays a progress bar where current progress ranges from 0 to 100. On macOS the progress bar displays as a percentage value in the notification title instead of in the progress bar.
```js
var opt = {
type: "progress",
title: "Primary Title",
message: "Primary message to display",
iconUrl: "url_to_small_icon",
progress: 42
}
Écouter des é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 le service worker, afin que les notifications puissent s'afficher même lorsque l'extension n'est pas en cours d'exécution.