Notification()

Limited availability

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

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

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 que le matériel de vibration de l'appareil émet avec la notification.
renotify: Un Boolean 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 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 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.

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().

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