Script notification : Gérer les notifications

Gérer 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

<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>

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>

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

Le graph des objets JavaScript

Chargement
en cours...