Notification()

Note: Cette fonctionnalité est disponible via les Web Workers.

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

Le constructeur Notification() crée une nouvelle instance d'objet Notification, qui représente une notification utilisateur.

Syntaxe

js
const myNotification = new Notification(title, options);

Paramètres

title

Définit un titre pour la notification, qui s'affiche en haut de la fenêtre de notification.

options Facultatif

Un objet d'options contenant tous les paramètres personnalisés que vous souhaitez appliquer à la notification. Les options possibles sont:

  • dir: La direction dans laquelle afficher la notification. La valeur par défaut est auto, qui adopte simplement le comportement du paramètre de langue du navigateur, mais vous pouvez remplacer ce comportement en définissant les valeurs de ltr et rtl (bien que la plupart des navigateurs semblent ignorer ces paramètres.)
  • lang: La langue de la notification, telle que spécifiée à l'aide d'un DOMString représentant une balise de langue BCP 47. Consultez la page des codes de langue à 2 lettres ISO de Sitepoint pour une référence simple.
  • badge: Un USVString contenant l'URL de l'image utilisée pour représenter la notification lorsqu'il n'y a pas assez d'espace pour afficher la notification elle-même.
  • body: Un DOMString représentant le corps du texte de la notification, qui est affiché sous le titre.
  • tag: Un DOMString représentant un tag d'identification pour la notification.
  • icon: Une USVString contenant l'URL d'une icône à afficher dans la notification.
  • image: Une USVString contenant l'URL d'une image à afficher dans la notification.
  • data: Données arbitraires que vous souhaitez associer à la notification. Elles peuvent être de n'importe quel type de données.
  • vibrate: Un modèle de vibration (en-US) que le matériel de vibration de l'appareil émet avec la notification.
  • renotify: Un Boolean (en-US) spécifiant si l'utilisateur doit être notifié après qu'une nouvelle notification remplace l'ancienne. La valeur par défaut est false, ce qui signifie qu'ils ne seront pas notifiés.
  • requireInteraction: Un Boolean (en-US) indiquant qu'une notification doit rester active jusqu'à ce que l'utilisateur clique dessus ou la rejette, plutôt que de se fermer automatiquement. La valeur par défaut est false.
  • actions: Un tableau de NotificationAction représentant les actions disponibles pour l'utilisateur lorsque la notification est présentée. Ce sont des options parmi lesquelles l'utilisateur peut choisir pour agir sur l'action dans le contexte de la notification elle-même. Le nom de l'action est envoyé au gestionnaire de notifications du service worker pour lui faire savoir que l'action a été sélectionnée par l'utilisateur.
  • silent: Un Boolean (en-US) spécifiant si la notification est silencieuse (aucun son ni vibration émis), quels que soient les paramètres de l'appareil. La valeur par défaut est false, ce qui signifie qu'il ne sera pas silencieux.

Exemple

Dans notre démo Emogotchi (voir le code source), nous exécutons une fonction spawnNotification() lorsque nous voulons déclencher une notification. La fonction reçoit des paramètres pour spécifier le corps, l'icône et le titre souhaités, puis elle crée l'objet options nécessaire et déclenche la notification à l'aide du constructeur Notification().

js
function spawnNotification(body, icon, title) {
  const options = {
    body: body,
    icon: icon,
  };
  const n = new Notification(title, options);
}

Spécifications

Specification
Notifications API Standard
# dom-notification-notification

Compatibilité des navigateurs

BCD tables only load in the browser

Notes Chrome

À partir de Chrome 49, les notifications ne fonctionnent pas en mode navigation privée.

Chrome pour Android lance une erreur TypeError lors de l'appel du constructeur Notification. Il ne prend en charge que la création de notifications à partir d'un service worker. Consultez le Chromium issue tracker pour plus de détails.

Notes Internet Explorer

La version 38.14352 et celles supérieure de MS Edge prend en charge l'API Notification. Wikipédia - MS Edge IE 11 et inférieur n'est pas pris en charge.

Voir aussi