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.

L'interface Notification de l'API Notifications est utilisée pour configurer et afficher les notifications de bureau à l'utilisateur. L'apparence et les fonctionnalités spécifiques de ces notifications varient selon les plates-formes, mais elles permettent généralement de fournir des informations de manière asynchrone à l'utilisateur.

Constructeur

Notification()
Créer une nouvelle instance de l'object Notification.

Propriétés

Propriétés statiques

Ces propriétés ne sont disponibles que sur l'objet Notification lui-même.

Notification.permission Lecture seule
Une chaîne représentant l'autorisation actuelle d'afficher les notifications. Les valeurs possibles sont:
  • denied — L'utilisateur refuse d'afficher des notifications.
  • granted — L'utilisateur accepte d'afficher des notifications.
  • default — Le choix de l'utilisateur est inconnu et donc le navigateur agira comme si la valeur était refusée.
Notification.maxActions Lecture seule

Propriétés de l'instance

Ces propriétés ne sont disponibles que sur les instances de l'objet Notification.

Notification.actions Lecture seule
Tableau d'actions de la notification comme spécifié dans le paramètre options du constructeur.
Notification.badge Lecture seule
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.
Notification.body Lecture seule
Une chaîne représentant le corps de la notification telle que spécifiée dans le paramètre options du constructeur.
Notification.data Lecture seule
Renvoie un clone structuré des données de la notification.
Notification.dir Lecture seule
La direction du texte de la notification comme spécifié dans le paramètre options du constructeur.
Notification.lang Lecture seule
Code de langue de la notification tel que spécifié dans le paramètre options du constructeur.
Notification.tag Lecture seule
L'ID de la notification (le cas échéant) tel que spécifié dans le paramètre options du constructeur.
Notification.icon Lecture seule
L'URL de l'image utilisée comme icône de la notification comme spécifié dans le paramètre options du constructeur.
Notification.image Lecture seule
L'URL d'une image à afficher dans le cadre de la notification, comme spécifié dans le paramètre options du constructeur.
Notification.renotify Lecture seule
Spécifie si l'utilisateur doit être averti après qu'une nouvelle notification remplace l'ancienne.
Notification.requireInteraction Lecture seule
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.
Notification.silent Lecture seule
Spécifie si la notification doit être silencieuse, c'est-à-dire qu'aucun son ou vibration ne doit être émis, quels que soient les paramètres de l'appareil.
Notification.timestamp Lecture seule
Spécifie l'heure à laquelle une notification est créée ou applicable (passée, présente ou future).
Notification.title Lecture seule
Le titre de la notification tel que spécifié dans le premier paramètre du constructeur.
Notification.vibrate Lecture seule
Spécifie un modèle de vibration pour les périphériques dotés d'un matériel de vibration à émettre.

Gestionnaires d'événements

Notification.onclick
Un gestionnaire pour l'événement click. Il est déclenché à chaque fois que l'utilisateur clique sur la notification.
Notification.onclose
Un gestionnaire pour l'événement close. Il est déclenché lorsque l'utilisateur ferme la notification.
Notification.onerror
Un gestionnaire pour l'événement error. Il est déclenché chaque fois que la notification rencontre une erreur.
Notification.onshow
Un gestionnaire pour l'événement show. Il est déclenché lorsque la notification est affichée.

Méthodes

Méthodes statiques

Ces méthodes ne sont disponibles que sur l'objet Notification lui-même.

Notification.requestPermission()
Demande l'autorisation à l'utilisateur d'afficher les notifications.

Méthodes d'instance

Ces propriétés ne sont disponibles que sur une instance de l'objet Notification ou via son prototype. L'objet Notification hérite également de l'interface EventTarget.

Notification.close()
Ferme programmatiquement une instance de notification.

Exemples

Supposons ce HTML de base:

<button onclick="notifyMe()">Notifie moi !</button>

Il est possible d'envoyer une notification comme suit - nous présentons ici un ensemble de code assez détaillé et complet que vous pourriez utiliser si vous vouliez d'abord vérifier si les notifications sont prises en charge, puis vérifiez si l'autorisation a été accordée pour l'origine actuelle d'envoyer des notifications, puis demander l'autorisation si nécessaire, avant d'envoyer une notification.

function notifyMe() {
  // Vérifions si le navigateur prend en charge les notifications
  if (!('Notification' in window)) {
    alert('Ce navigateur ne prend pas en charge la notification de bureau')
  }

  // Vérifions si les autorisations de notification ont déjà été accordées
  else if (Notification.permission === 'granted') {
    // Si tout va bien, créons une notification
    const notification = new Notification('Salut toi!')
  }

  // Sinon, nous devons demander la permission à l'utilisateur
  else if (Notification.permission !== 'denied') {
    Notification.requestPermission().then((permission) => {
      // Si l'utilisateur accepte, créons une notification
      if (permission === 'granted') {
        const notification = new Notification('Salut toi!')
      }
    })
  }

  // Enfin, si l'utilisateur a refusé les notifications, et que vous
  // voulez être respectueux, il n'est plus nécessaire de les déranger.
}

Nous ne montrons plus d'exemple en direct sur cette page, car Chrome et Firefox n'autorisent plus les demandes de notification des <iframe>s d'origine croisée, avec d'autres navigateurs à suivre. Pour voir un exemple en action, consultez notre exemple de liste de tâches (voir également l'application en cours d'exécution.)

Note: dans l'exemple ci-dessus, nous générons des notifications en réponse à un geste de l'utilisateur (en cliquant sur un bouton). Il ne s'agit pas seulement d'une bonne pratique - vous ne devriez pas envoyer de spam aux utilisateurs avec des notifications qu'ils n'acceptent pas - mais les navigateurs suivants interdiront explicitement les notifications non déclenchées en réponse à un geste de l'utilisateur. Firefox le fait déjà depuis la version 72, par exemple.

Spécifications

Spécification État Commentaire
Notifications API Standard évolutif Living standard

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
NotificationChrome Support complet 22
Notes
Support complet 22
Notes
Notes Before Chrome 22, the support for notification followed an old prefixed version of the specification and used the navigator.webkitNotifications object to instantiate a new notification. Before Chrome 32, Notification.permission was not supported. Before Chrome 42, service worker additions were not supported. Starting in Chrome 49, notifications do not work in incognito mode.
Support complet 5
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : webkit
Edge Support complet 14Firefox Support complet 22
Support complet 22
Support complet 4
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : moz
IE Aucun support NonOpera Support complet 25Safari Support complet 6WebView Android Aucun support NonChrome Android Support complet OuiFirefox Android Support complet 22
Support complet 22
Support complet 4
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : webkit
Opera Android Support complet OuiSafari iOS Aucun support NonSamsung Internet Android Support complet Oui
Notification() constructorChrome Support complet 22
Support complet 22
Support complet 5
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : webkit
Edge Support complet ≤18Firefox Support complet 22
Support complet 22
Support complet 4
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : moz
IE Aucun support NonOpera Support complet 25Safari Support complet 6WebView Android Aucun support NonChrome Android Support complet OuiFirefox Android Support complet 22
Support complet 22
Support complet 4
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : moz
Opera Android Support complet OuiSafari iOS Aucun support NonSamsung Internet Android Support complet Oui
actionsChrome Support complet 53Edge Support complet 18Firefox Aucun support NonIE Aucun support NonOpera Support complet 39Safari ? WebView Android Aucun support NonChrome Android Support complet 53Firefox Android Aucun support NonOpera Android Support complet 41Safari iOS Aucun support NonSamsung Internet Android Support complet 6.0
badgeChrome Support complet 53Edge Support complet 18Firefox Aucun support NonIE Aucun support NonOpera Support complet 39Safari ? WebView Android Aucun support NonChrome Android Support complet 53Firefox Android Aucun support NonOpera Android Support complet 41Safari iOS Aucun support NonSamsung Internet Android Support complet 6.0
bodyChrome Support complet OuiEdge Support complet 14Firefox Support complet OuiIE Aucun support NonOpera Support complet OuiSafari Support complet OuiWebView Android Aucun support NonChrome Android Support complet OuiFirefox Android Support complet OuiOpera Android Support complet OuiSafari iOS Aucun support NonSamsung Internet Android Support complet Oui
closeChrome Support complet OuiEdge Support complet 14Firefox Support complet OuiIE Aucun support NonOpera Support complet OuiSafari Support complet OuiWebView Android Aucun support NonChrome Android Support complet OuiFirefox Android Support complet OuiOpera Android Support complet OuiSafari iOS Aucun support NonSamsung Internet Android Support complet Oui
dataChrome Support complet OuiEdge Support complet 16Firefox Support complet OuiIE Aucun support NonOpera Support complet OuiSafari ? WebView Android Aucun support NonChrome Android Support complet OuiFirefox Android Support complet OuiOpera Android Support complet OuiSafari iOS Aucun support NonSamsung Internet Android Support complet Oui
dirChrome Support complet OuiEdge Support complet 14Firefox Support complet OuiIE Aucun support NonOpera Support complet OuiSafari Support complet OuiWebView Android Aucun support NonChrome Android Support complet OuiFirefox Android Support complet OuiOpera Android Support complet OuiSafari iOS Aucun support NonSamsung Internet Android Support complet Oui
iconChrome Support complet 22
Support complet 22
Support complet 5
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : webkit
Edge Support complet 14Firefox Support complet 22
Support complet 22
Support complet 4
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : moz
IE Aucun support NonOpera Support complet 25Safari Aucun support NonWebView Android Aucun support NonChrome Android Support complet OuiFirefox Android Support complet 22
Support complet 22
Support complet 4
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : moz
Opera Android Support complet OuiSafari iOS Aucun support NonSamsung Internet Android Support complet Oui
imageChrome Support complet 53Edge Support complet 18Firefox Aucun support NonIE Aucun support NonOpera Support complet 40Safari ? WebView Android Aucun support NonChrome Android Support complet 53Firefox Android Aucun support NonOpera Android Support complet 41Safari iOS Aucun support NonSamsung Internet Android Support complet 6.0
langChrome Support complet OuiEdge Support complet 14Firefox Support complet OuiIE Aucun support NonOpera Support complet OuiSafari Support complet OuiWebView Android Aucun support NonChrome Android Support complet OuiFirefox Android Support complet OuiOpera Android Support complet OuiSafari iOS Aucun support NonSamsung Internet Android Support complet Oui
maxActionsChrome Support complet OuiEdge Support complet 18Firefox Aucun support NonIE Aucun support NonOpera Support complet OuiSafari ? WebView Android Aucun support NonChrome Android Support complet OuiFirefox Android Aucun support NonOpera Android Support complet OuiSafari iOS Aucun support NonSamsung Internet Android Support complet Oui
onclickChrome Support complet OuiEdge Support complet 14Firefox Support complet 22IE Aucun support NonOpera Support complet OuiSafari Support complet OuiWebView Android Aucun support NonChrome Android Support complet OuiFirefox Android Aucun support NonOpera Android Support complet OuiSafari iOS Aucun support NonSamsung Internet Android Support complet Oui
oncloseChrome Support complet OuiEdge Support complet 14Firefox Support complet OuiIE Aucun support NonOpera Support complet OuiSafari Support complet OuiWebView Android Aucun support NonChrome Android Support complet OuiFirefox Android Support complet OuiOpera Android Support complet OuiSafari iOS Aucun support NonSamsung Internet Android Support complet Oui
onerrorChrome Support complet OuiEdge Support complet 14Firefox Aucun support NonIE Aucun support NonOpera Support complet OuiSafari Support complet OuiWebView Android Aucun support NonChrome Android Support complet OuiFirefox Android Aucun support NonOpera Android Support complet OuiSafari iOS Aucun support NonSamsung Internet Android Support complet Oui
onshowChrome Support complet OuiEdge Support complet 14Firefox Support complet OuiIE Aucun support NonOpera Support complet OuiSafari Support complet OuiWebView Android Aucun support NonChrome Android Support complet OuiFirefox Android Support complet OuiOpera Android Support complet OuiSafari iOS Aucun support NonSamsung Internet Android Support complet Oui
permissionChrome Support complet OuiEdge Support complet 14Firefox Support complet OuiIE Aucun support NonOpera Support complet OuiSafari Support complet OuiWebView Android Aucun support NonChrome Android Support complet OuiFirefox Android Support complet OuiOpera Android Support complet OuiSafari iOS Aucun support NonSamsung Internet Android Support complet Oui
renotifyChrome Support complet 50Edge Support complet 79Firefox Aucun support NonIE Aucun support NonOpera Support complet 37Safari Aucun support NonWebView Android Aucun support NonChrome Android Support complet 50Firefox Android Aucun support NonOpera Android Support complet 37Safari iOS Aucun support NonSamsung Internet Android Support complet 5.0
requestPermissionChrome Support complet 46Edge Support complet 14Firefox Support complet 47
Notes
Support complet 47
Notes
Notes From Firefox 70 onwards, cannot be called from a cross-origin IFrame.
Notes From Firefox 72 onwards, can only be called in response to a user gesture such as a click event.
IE Aucun support NonOpera Support complet 40Safari Support complet OuiWebView Android Aucun support NonChrome Android Support complet 46Firefox Android Support complet OuiOpera Android Support complet 41Safari iOS Aucun support NonSamsung Internet Android Support complet 5.0
requireInteractionChrome Support complet OuiEdge Support complet 17Firefox Aucun support NonIE Aucun support NonOpera Support complet OuiSafari ? WebView Android Aucun support NonChrome Android Support complet OuiFirefox Android Aucun support NonOpera Android Support complet OuiSafari iOS Aucun support NonSamsung Internet Android Support complet Oui
Secure context requiredChrome Support complet 62Edge Support complet ≤79Firefox Support complet 67IE Aucun support NonOpera Support complet 49Safari ? WebView Android Aucun support NonChrome Android Support complet 62Firefox Android Support complet 67Opera Android Support complet 46Safari iOS Aucun support NonSamsung Internet Android Support complet 8.0
silentChrome Support complet 43Edge Support complet 17Firefox Aucun support NonIE Aucun support NonOpera Support complet 30Safari Aucun support NonWebView Android Aucun support NonChrome Android Support complet 43Firefox Android Aucun support NonOpera Android Support complet 30Safari iOS Aucun support NonSamsung Internet Android Support complet 4.0
tagChrome Support complet OuiEdge Support complet 14Firefox Support complet OuiIE Aucun support NonOpera Support complet OuiSafari Support complet OuiWebView Android Aucun support NonChrome Android Support complet OuiFirefox Android Support complet OuiOpera Android Support complet OuiSafari iOS Aucun support NonSamsung Internet Android Support complet Oui
timestampChrome Support complet OuiEdge Support complet 17Firefox Aucun support NonIE Aucun support NonOpera Support complet OuiSafari ? WebView Android Aucun support NonChrome Android Support complet OuiFirefox Android Aucun support NonOpera Android Support complet OuiSafari iOS Aucun support NonSamsung Internet Android Support complet Oui
titleChrome Support complet OuiEdge Support complet 14Firefox Aucun support NonIE Aucun support NonOpera Support complet OuiSafari Support complet OuiWebView Android Aucun support NonChrome Android Support complet OuiFirefox Android Aucun support NonOpera Android Support complet OuiSafari iOS Aucun support NonSamsung Internet Android Support complet Oui
vibrateChrome Aucun support NonEdge Aucun support NonFirefox Aucun support NonIE Aucun support NonOpera Aucun support NonSafari ? WebView Android Aucun support NonChrome Android Support complet 53
Notes
Support complet 53
Notes
Notes Does not work on Android O or later regardless of Chrome version.
Firefox Android Aucun support NonOpera Android Support complet 41
Notes
Support complet 41
Notes
Notes Does not work on Android O or later regardless of Chrome version.
Safari iOS Aucun support NonSamsung Internet Android Support complet 6.0
Notes
Support complet 6.0
Notes
Notes Does not work on Android O or later regardless of Chrome version.
Available in workersChrome Support complet 45Edge Support complet ≤18Firefox Support complet 41IE Aucun support NonOpera Support complet 32Safari ? WebView Android Aucun support NonChrome Android Support complet 45Firefox Android Support complet 41Opera Android Support complet 32Safari iOS Aucun support NonSamsung Internet Android Support complet 5.0

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

Voir également