Utiliser l'API Notifications

L'API browser.notifications 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 :

À quoi ressemblent-ils ?

Il existe quatre types de notifications enrichies : de base, avec image, avec liste et avec 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 avec une police de couleur plus claire.

Notification de base :

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

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

Les notifications de progression affichent une barre de progression :

comment elles se comportent.

Sur ChromeOS, les notifications s'affichent dans la barre d'état système de l'utilisateur et y restent jusqu'à ce que l'utilisateur les ferme. 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 nombre 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 pour une durée croissante, et davantage de notifications à priorité élevée peuvent être affichées dans la barre d'état système.

Le paramètre priority n'a aucune incidence sur l'ordre des notifications sur macOS.

En plus d'afficher des informations, tous les types de notifications peuvent inclure jusqu'à deux actions. Lorsque les utilisateurs cliquent sur un élément d'action, votre extension 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 rédiger sa réponse :

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 browser.notifications.create(id, options);

Le notifications.NotificationOptions doit 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èles (basic, image, list et progress) doivent inclure une notification title et message, 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"
}

Utiliser une image

Le type de modèle image inclut également un imageUrl, qui est un lien vers une image dont l'aperçu est affiché dans la notification. Notez que les images ne sont pas affichées aux utilisateurs sur 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 est affiché aux utilisateurs sur 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 et des gestionnaires d'événements qui répondent aux actions de l'utilisateur (voir browser.events). Par exemple, vous pouvez écrire un gestionnaire d'événements pour répondre à un événement notifications.onButtonClicked.

Écouteur d'événements :

browser.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 puissent s'afficher même lorsque l'extension n'est pas en cours d'exécution.