API Notifications

Disponibilit limite

Cette fonctionnalit n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utiliss.

Vous voulez une meilleure prise en charge pour cette fonctionnalit ? Dites-nous pourquoi.

En savoir plus
Voir la compatibilit complte

Contexte scuris: Cette fonctionnalit est uniquement disponible dans des contextes scuriss (HTTPS), pour certains navigateurs qui la prennent en charge.

Note : Cette fonctionnalit est disponible via les Web Workers.

L'API Notifications permet aux pages web de contrler l'affichage des notifications systme. Celles-ci sont affiches en dehors de la fentre du contexte de navigation de plus haut niveau et peuvent donc tre affiches, mme lorsque la personne a chang d'onglet voire d'application. L'API est conue pour tre compatible avec les systmes de notification existants sur les diffrentes plateformes.

Concepts et utilisation

Sur les plateformes prises en charge, l'affichage d'une notification systme implique gnralement deux choses.

Autoriser les notifications

Tout d'abord, il faut que l'origine actuelle soit autorise afficher des notifications systme. Cela se fait gnralement l'initialisation du site ou de l'application l'aide de la mthode 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 ncessaire de respecter le consentement des personnes avant de leur envoyer des notifications. Les navigateurs interdiront explicitement les notifications qui ne sont pas dclenches suite une action explicite (c'est le cas de Firefox depuis la version 72 par exemple).

Lors de la demande d'autorisation, une bote de dialogue apparat dans le navigateur

[Une bote de dialogue demandant la permission d'envoyer des notifications depuis cette origine. Deux options sont prsentes : toujours bloquer d'une part et autoriser d'autre part.]

Ainsi, on peut choisir d'autoriser les notifications d'une origine donne ou les bloquer. Une fois le choix effectu, le paramtre persistera gnralement pour la session en cours.

Note : Pour Firefox, partir de Firefox 44, les permissions pour les notifications et l'API Push ont t fusionnes. Ainsi, si on autorise les notifications, les messages et notifications push seront galement autorises.

Cration de la notification

Ensuite, on peut crer 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'icne afficher, le son de notification lire, etc).

En outre, la spcification de l'API Notifications spcifie un certain nombre d'ajouts l'API ServiceWorker, qui permettent aux service worker de dclencher des notifications.

Note : Pour mieux savoir comment utiliser les notifications au sein de votre propre application, lisez Utiliser l'API Notifications.

Interfaces

Notification: Dfinit un objet reprsentant une notification.
NotificationEvent: Reprsente un vnement de notification diffus sur la porte ServiceWorkerGlobalScope d'un ServiceWorker.

Ajouts aux autres interfaces

vnement notificationclick: Se produit lors d'un clic sur une notification affiche.
vnement notificationclose: Se produit lorsqu'une personne ferme une notification affiche.
ServiceWorkerRegistration.getNotifications(): Renvoie une liste de notifications dans l'ordre selon lequel elles ont t cres pour l'origine courante et pour la porte courante du service worker.
ServiceWorkerRegistration.showNotification(): Affiche la notification avec le titre indiqu.