Script notification : G駻er les notifications
G駻er les notifications depuis le navigateur
Partie II : L'interactivité
Edition 1 | Chapitre 18 : Les notifications / Page 250
Edition 2 | Chapitre 19 : Les notifications / Page 271
Edition 3 | Chapitre 19 : Les notifications / Page 271
Exécution du script
Emulation de la console
Code source
<html><head><title>Notifications via le système d'exploitation</title></head><body><h1>Notifications via le système d'exploitation</h1><p>Cliquez sur ce bouton pour autoriser les notifications du site ToutJavaScript.com</p><div class="button" onclick="acceptNotification()">Accepter les notifications de TJS</div><div class="button" onclick="testNotification()">Tester une notification</div><div id="info"></div><script>function acceptNotification() { /* Vérifier que le navigateur supporte les notifications */ if (typeof Notification === undefined) { console.log("Les notifications ne sont pas supportées"); return false; } /* Demander l'autorisation si elle n'est pas encore accordée */ if (Notification.permission=="granted") { console.log("Permission déjà accordée"); sendNotification("Confirmation", "Vous avez accepté les notifications de TJS"); } else if (Notification.permission=="denied") { console.log("Permission déjà refusée"); var info=document.getElementById("info"); info.innerHTML="Vous avez déjà refusé les notifications de TJS"; info.style.display="block"; } else { Notification.requestPermission(function(result) { console.log("Vous avez choisi "+result); if (result=="granted") { var body="Vous recevrez des notifications quand de nouveaux contenus seront publiés"; sendNotification("Première notification", body, "first", ""); } }); }}/* Affichage d'une notification */function sendNotification(titre, body, tag, url) { var options={ tag: tag, body: body, icon: "https://www.toutjavascript.com/favicon.ico", lang: "fr" }; var notif=new Notification(titre, options); if (url=="") { url="https://www.toutjavascript.com/" } notif.onclick=function() { window.open(url); }}/* Tester une notification */function testNotification() { var body="Click automatique sur un lien avec JavaScript"; var url="https://www.toutjavascript.com/faq/index.php3?ID=103"; sendNotification("Nouvelle FAQ", body, "faq140", url);}</script><style type="text/css">div.button { border:1px solid #999; background: #ccc; padding:3px; display:inline-block; border-radius: 4px; cursor: pointer; font-weight:bold;}div.button:hover { color:#fff; background: #000;}div#info { position: absolute; top:5px; right:5px; border:1px solid #000; padding:5px; background: #a00; color:#fff; font-weight: bold; display: none; }</style></body></html>