Objet : Notification

Objet permettant l'affichage de notifications à l'utilisateur en passant par le système d'exploitation de l'appareil

Syntaxe
Notification(String titre, JSON options)

Attention, incompatible avec Internet Explorer et Opera

Non

Oui

Non

Description
L'objet permet l'affichage de notifications à l'utilisateur en passant par le système d'exploitation de son appareil.
La notification affichera le texte titre.
L'objet options contient les propriétés facultatives suivantes :
lang : Code langue de la notification
body : Corps détaillé de la notification, en texte, pas en HTML
tag : Identifiant de la notification
icon : Url d'une icône affichée dans la notification

Naturellement, l'utilisateur doit donner son accord pour recevoir les notifications d'un site internet.

Comme les notifications utilisent le mécanisme interne du système d'exploitation, l'apparence dépend de l'environnement.
Le système d'exploitation gère les permissions et l'affichage des notifications intelligemment. Une notification dont l'identifiant tag a déjà été affichée ne sera pas affichée de nouveau, même si le code source le demande.

Attention de bien tester l'existence de l'objet Notification pour gérer les navigateurs qui n'acceptent pas la gestion des notifications.

L'ajout d'un événement onclick gère le clic sur la notification pour déclencher une action, typiquement l'ouverture d'une url.

Propriété
permission Contient la valeur de permission des notifications

Méthode
requestPermission() Affiche un message à l'utilisateur de demande d'autorisation d'envoi de notifications

Exemple 1 : Exemple complet de notifications

Code source

<div class="btn radius btn-outline cursor-pointer" onclick="lancerExempleNotif()">Lancez l'exemple complet</div>

<script type="text/javascript">
function lancerExempleNotif() {
console.log("Lancement de l'exemple");

/* Vérifier que l'objet existe */
if (typeof Notification === undefined) {
console.log("Notification n'est pas un objet connu");
return false;
}

/* Tester si la permission a déjà été donnée */
if (Notification.permission=="granted") {
console.log("Permission déjà accordée");
lancerNotif();
} else {
Notification.requestPermission(function(result) {
console.log("Vous avez choisi "+result);
if (result=="granted") {
lancerNotif();
}
});
}
}

function lancerNotif() {
var options={
"lang":"FR",
"icon":"/favicon.ico",
"tag": new Date(),
"body": "Ceci est la notification de TJS de l'exemple de la référence"
};
var notif=new Notification("Notification TJS", options);

notif.onclick = function(event) {
event.preventDefault();
window.open("http://www.toutjavascript.com/reference", "_blank");
}
}

</script>

Résultat

Lancez l'exemple complet

Emulation de la console

Explication

Exemple complet avec gestion des permissions et affichage d'une notification.

Notez que le tag de la notification est une date pour assurer un identifiant unique et assurer un affichage à chaque exécution.

Un événement onclick est ajouté pour gérer le clic sur la notification (et ouvrir la page d'accueil de la référence de TJS).

Page mise à jour le 26/09/2017

Troisième édition Tout JavaScript chez Dunod

En savoir plus
Sortie le 4 janvier 2023

Version papier 29€90
Format électronique 22€99.

Commandez en ligne

Dunod Fnac Amazon

Objet : Notification

Objet permettant l'affichage de notifications à l'utilisateur en passant par le système d'exploitation de l'appareil

Troisième édition Tout JavaScript chez Dunod

Chercher une fonction, un objet, ...