Créer une notification web HTML avec Javascript (Chrome, Firefox, Edge...)
Le code suivant ne fonctionnera pas en local (avec le protocole file://). Utilisez un serveur ou un live server
On peut vérifier si le navigateur prend en charge les notifications comme ceci :
if (!Notification) {
alert('Le navigateur ne supporte pas les notifications.');
}La vérification des droits de notification se fait comme ceci :
Notification.permission !== 'granted'Il y a trois valeurs possibles : default, granted, denied
Pour demander la permission, il faut faire :
Notification.requestPermission();Enfin, pour créer une notification, on construit un nouvel objet.
var notification = new Notification('Bonjour !');Notez qu'il est possible d'ajouter un titre. Il y aura deux arguments. Le deuxième sera un objet JS.
var notification = new Notification('Titre de la notification', {body : 'Bonjour !'} );On peut ajouter une icône et une image à la notification.
var notification = new Notification('Titre de la notification', {
icon: '/icons/bell_64px.png',
body: 'Bonjour !',
image: "/images/notification-image.jpg",
});Pour détecter un clic, on utilise la méthode onclick. Dans l'exemple suivant, la notification ouvre un nouvel onglet lors d'un clic.
notification.onclick = function () {
window.open('http://example.org/');
};Pour finir, le code complet :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple de notification</title>
</head>
<body>
<button id="notifier-btn">Notifier</button>
<script>
document.getElementById("notifier-btn").onclick = notifier;
/* Quand le document sera chargé */
document.addEventListener('DOMContentLoaded', function () {
/* Vérifie si le navigateur est compatible avec les notifications */
if (!Notification) {
alert('Le navigateur ne supporte pas les notifications.');
}
/* Si le navigateur prend en charge les notifications,
* on demande la permission si les notifications ne sont pas permises */
else if (Notification.permission !== 'granted')
Notification.requestPermission();
});
function notifier() {
/* On demande la permission si les notifications ne sont pas permises */
if (Notification.permission !== 'granted')
Notification.requestPermission();
else {
var notification = new Notification('Bonjour !');
//var notification = new Notification('Titre de la notification', {body : 'Bonjour !'} );
/*var notification = new Notification('Titre de la notification', {
icon: '/icons/bell_64px.png',
body: 'Bonjour !',
image: "/images/notification-image.jpg",
});*/
notification.onclick = function () {
window.open('http://example.org/');
};
}
}
</script>
</body>
</html>Vous pouvez consulter le tableau de compatibilité des navigateurs avec l'API Notification
Commentaires
Enregistrer un commentaire