API de Notifications

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'API Notifications permet aux pages Web de contrôler l'affichage des notifications système de l'utilisateur final. Ceux-ci sont en dehors de la fenêtre du contexte de navigation de niveau supérieur, ils peuvent donc être affichés même lorsque l'utilisateur a changé d'onglet ou déplacé vers une autre application. L'API est conçue pour être compatible avec les systèmes de notification existants, sur différentes plates-formes.

Concepts et utilisation

Sur les plates-formes prises en charge, l'affichage d'une notification système implique généralement deux choses. Tout d'abord, l'utilisateur doit accorder l'autorisation à l' origine actuelle pour afficher les notifications système, ce qui est généralement effectué lorsque l'application ou le site s'initialise, à l'aide de la méthode Notification.requestPermission(). Cela doit être fait en réponse à un geste de l'utilisateur, tel que cliquer sur un bouton, par exemple:

btn.addEventListener('click', () => {
  let promise = Notification.requestPermission()
  // wait for permission
})

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.

Cela créera une boîte de dialogue, proche de cette apparence:

De là, l'utilisateur peut choisir d'autoriser les notifications de cette origine ou de les bloquer. Une fois le choix effectué, le paramètre persistera généralement pour la session en cours.

Note: Depuis Firefox 44, les autorisations pour les notifications et le push ont été fusionnées. Si l'autorisation est accordée pour les notifications, le push sera également activé.

Ensuite, une nouvelle notification est créée à l'aide du constructeur Notification (). Auquel on doit passé un titre en argument et il peut éventuellement recevoir un objet d'options pour personnalisés la notification, telles que 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, pour permettre aux service worker de déclencher des notifications.

Note: Pour en savoir plus sur l'utilisation des notifications dans votre propre application, lisez Utilisation de l'API Notifications.

Les interfaces de Notifications

Notification
Définit un objet Notification.

Ajout de service worker

ServiceWorkerRegistration
Inclut les méthodes ServiceWorkerRegistration.showNotification() et ServiceWorkerRegistration.getNotifications(), pour contrôler l'affichage des notifications.
ServiceWorkerGlobalScope
Inclut le gestionnaire ServiceWorkerGlobalScope.onnotificationclick, pour déclencher des fonctions personnalisées lorsqu'un utilisateur clique sur une notification.
NotificationEvent
Un type spécifique d'objet événement, basé sur ExtendableEvent, qui représente une notification qui s'est déclenchée.

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