Retourner à la page d'accueil de TJS

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)

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

Chercher une fonction, un objet, ...

Le graph des objets Javascript



Chargement
en cours...

Le guide complet du javascript

Le Guide Complet du JavascriptEn savoir plus sur mon livre aux Editions Micro Application
Le 19/11/2017 11:36:32 sur php7 en 21.48 ms