API Notifications

Sur les plateformes prises en charge, l'affichage d'une notification système implique généralement deux choses.

Tout d'abord, il faut que l'origine actuelle soit autorisée à afficher des notifications système. Cela se fait généralement à l'initialisation du site ou de l'application à l'aide de la méthode Notification.requestPermission(). Cette demande d'autorisation doit faire suite à une action explicite de la personne, par exemple le clic sur un bouton :

btn.addEventListener("click", () => {
  let promise = Notification.requestPermission();
  // attendre l'autorisation
});

Il ne s'agit pas seulement d'une bonne pratique : il est nécessaire de respecter le consentement des personnes avant de leur envoyer des notifications. Les navigateurs interdiront explicitement les notifications qui ne sont pas déclenchées suite à une action explicite (c'est le cas de Firefox depuis la version 72 par exemple).

Lors de la demande d'autorisation, une boîte de dialogue apparaît dans le navigateur

Ainsi, on peut choisir d'autoriser les notifications d'une origine donnée ou les bloquer. Une fois le choix effectué, le paramètre persistera généralement pour la session en cours.

Ensuite, on peut créer une nouvelle notification à l'aide du constructeur Notification() auquel on passera un titre en argument et éventuellement un objet d'options afin de personnaliser la notification (la direction du texte, le corps du texte, l'icône à afficher, le son de notification à lire, etc).

En outre, la spécification de l'API Notifications spécifie un certain nombre d'ajouts à l'API ServiceWorker, qui permettent aux service worker de déclencher des notifications.

Notification

Définit un objet représentant une notification.

NotificationEvent

Représente un évènement de notification diffusé sur la portée ServiceWorkerGlobalScope d'un ServiceWorker.

Évènement notificationclick

Se produit lors d'un clic sur une notification affichée.

Évènement notificationclose

Se produit lorsqu'une personne ferme une notification affichée.

ServiceWorkerRegistration.getNotifications()

Renvoie une liste de notifications dans l'ordre selon lequel elles ont été créées pour l'origine courante et pour la portée courante du service worker.

ServiceWorkerRegistration.showNotification()

Affiche la notification avec le titre indiqué.

• Utiliser l'API Notifications