Utiliser l'API Notifications

L'API chrome.notifications 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, qui s'affiche en tant que troisième champ de texte dans une police de couleur plus claire.

Une notification 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. Les priorités inférieures à 0 sont affichées dans ChromeOS centre de notifications, et génèrent une erreur sur d’autres plateformes. La priorité par défaut est 0. Les priorités supérieures à 0 sont affichées pour augmenter la durée, et il est possible que davantage de notifications à priorité élevée soient affiché 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 tâche, votre extension peut y répondre en indiquant 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 en intégralité:

Comment les développer

Pour utiliser cette API, appelez la méthode notifications.create() en transmettant les détails de la notification à l'aide de le 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 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"
}

Utiliser une image

Le type de modèle image inclut également un imageUrl, qui est un lien vers une image prévisualisée. dans la notification. Notez que les utilisateurs ne peuvent pas voir les images sous 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 sous 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 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 l'é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.
}

Envisagez d'inclure des écouteurs et des gestionnaires d'événements dans le service worker, afin que les notifications peut s'afficher même lorsque l'extension n'est pas en cours d'exécution.