Création d'effets d'information de notification adaptés aux téléphones mobiles et ordinateurs avec JS

Aujourd'hui, le projet est presque terminé, j'ai écrit deux articles pendant mon temps libre. L'article précédent, 'Comment configurer un projet node', je suppose que ceux qui ont besoin d'apprendre l'ont déjà lu. L'effet final de cet article est vraiment excellent, donc ici, je veux enregistrer cela pour que je puisse le consulter à nouveau à l'avenir.
C'est toujours la même routine que par le passé, nous expliquons pas à pas, de sorte que la logique de lecture soit claire.

Regardons d'abord l'effet :

Attention à la boîte de dialogue apparue en bas à droite, c'est l'effet que nous avons réalisé.

Après avoir vu l'effet, passons maintenant à la mode d'explication en détail………..

Étape 1 :Écrivons d'abord un squelette

Tous les codes suivants sont écrits à l'intérieur de la balise script, il suffit de s'intéresser au contenu à l'intérieur de la balise script :

  <!DOCTYPE html>
  <html>
  <head lang="en">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8">
    <meta content="" name="description">
    <meta content="" name="keywords">
    <meta content="eric.wu" name="author">
    <meta content="application/xhtml+xml;charset=UTF-8" http-equiv="Content-Type">
    <meta property="qc:admins" />
    <meta content="telephone=no, address=no" name="format-detection">
    <meta content="width=device"-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
    <title>Exemple de notification de message</title>
  </head>
  <body>
     Check the message notification at the lower right corner..........
  </body>
  </html>
  <script type="text/javascript">
  </script>

Étape 2 :Vérifier si le navigateur prend en charge l'API Web Notifications

Ici, nous devons juger si le navigateur prend en charge l'API Web Notifications, seulement si cette chose est prise en charge, nous pourrons continuer.

   function justify_notifyAPI(){
      if (window.Notification) {
        // Supported
        console.log("Supported"+"Web Notifications API"
      } else {
        // Not supported
        console.log("Not supported"+"Web Notifications API"
      }
    }

Étape 3 :Vérifiez si le navigateur prend en charge l'instance de popup

Voici une boîte de dialogue, pour vérifier si le navigateur prend en charge l'instance de popup (remplacez l'adresse de l'image par votre propre adresse).

function justify_showMess(){
  if(window.Notification && Notification.permission !== "denied") {
    Notification.requestPermission(function(status) {
      if (status === "granted") {
        var n = new Notification('Received message:',-O', {
          body: 'Here is the notification content! What do you want to see, guest?'
          icon:"../../images/headerPic/QQ picture20160525234650.jpg"
        });
      }
        var n = new Notification("baby! i will leave you!");
      }
    });
  }
}

Étape 4 :Example of the content displayed in the pop-up

Le attribut title de la fonction de construction Notification est obligatoire, utilisé pour spécifier le titre de la notification, format de chaîne. L'attribut options est optionnel, format d'un objet, utilisé pour définir divers réglages. Les propriétés de cet objet sont les suivantes :

dir : direction du texte, les valeurs possibles sont auto、ltr (de gauche à droite) et rtl (de droite à gauche), généralement hérité des paramètres du navigateur.

lang : langue utilisée, par exemple en-US、zh-CN.

body : contenu de la notification, format de chaîne, utilisé pour expliquer davantage l'objectif de la notification.

tag : ID de la notification, format de chaîne. Un ensemble de notifications avec le même tag ne s'affichera pas en même temps, mais seulement après que l'utilisateur ait fermé la notification précédente, à la même position.

icon : URL de l'icône, utilisée pour afficher sur la notification.

  function otification_construct(){
  var notification = new Notification('Received new email', {
    body: 'Vous avez',1"Un e-mail non lu provenant de Xuejing."
    dir: "auto",
    lang:"zh",-CN",
    tag: "a",1",
    icon:"../../images/headerPic/772513932673948130.jpg"
  });
   // "Nouveau courrier électronique reçu"
  console.log(notification.body); // 3"Un e-mail non lu."
}

Étape 5 :Événements associés à l'API Notifications

L'instance Notification déclenche les trois événements suivants :
show : déclenché lorsque la notification est affichée à l'utilisateur.

click : déclenché lorsque l'utilisateur clique sur la notification.

close : déclenché lorsque l'utilisateur ferme la notification.

error : déclenché lors de l'erreur de notification (apparaît lorsque la notification ne peut pas être affichée correctement).

Ces événements ont des méthodes correspondantes comme onshow、onclick、onclose、onerror, utilisées pour spécifier les fonctions de rappel correspondantes. La méthode addEventListener peut également être utilisée pour spécifier les fonctions de rappel pour ces événements.

function otification_event(){
  var MM = new Notification("Hi! My beautiful little princess！",{
    body: 'Vous avez',1Un e-mail provenant de l'espace lointain.
    icon:"../../images/headerPic/20100114212301-1126264202.jpg"
  });
  MM.onshow = function() {
    console.log('Notification showning!');
  };
  MM.onclick = function() {
    console.log('Notification have be click!');
  };
  MM.onerror = function() {
    console.log('Notification have be click!');
    // Fermeture manuelle
    MM.close();
  };
}

Les fonctions de base ont été expliquées ici, voici le code source du démo de l'effet ci-dessus :

<!DOCTYPE html>
<html>
<head lang="en">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta charset="utf-8">
  <meta content="" name="description">
  <meta content="" name="keywords">
  <meta content="eric.wu" name="author">
  <meta content="application/xhtml+xml;charset=UTF-8" http-equiv="Content-Type">
  <meta property="qc:admins" />
  <meta content="telephone=no, address=no" name="format-detection">
  <meta content="width=device"-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
  <title>Web Notifications API</title>
</head>
<body>
 Check the message notification at the lower right corner..........
</body>
</html>
<script type="text/javascript">
  window.onload= function(){
    justify_notifyAPI();   //Determine whether the browser supports the Web Notifications API
    justify_showMess();   //Whether the browser supports the pop-up instance
    otification_construct(); //Example of the content displayed in the pop-up
    otification_event();   //Événements associés à l'API Notifications 
  }
  //Determine whether the browser supports the Web Notifications API 
  function justify_notifyAPI(){
    if (window.Notification) {
      // Supported
      console.log("Supported"+"Web Notifications API"
    } else {
      // Not supported
      console.log("Not supported"+"Web Notifications API"
    }
  }
  //Whether the browser supports the pop-up instance
  function justify_showMess(){
    if(window.Notification && Notification.permission !== "denied") {
      Notification.requestPermission(function(status) {
        if (status === "granted") {
          var n = new Notification('Received message:',-O', {
            body: 'Here is the notification content! What do you want to see, guest?'
            icon:"../../images/headerPic/QQ picture20160525234650.jpg"
          });
          // alert("Hi! this is the notifyMessages!");
        }
          var n = new Notification("baby! i will leave you!");
        }
      });
    }
  }
  // Example of the content displayed in the pop-up
  function otification_construct(){
    var notification = new Notification('Received new email', {
      body: 'Vous avez',1"Un e-mail non lu provenant de Xuejing."
      dir: "auto",
      lang:"zh",-CN",
      tag: "a",1",
      icon:"../../images/headerPic/772513932673948130.jpg"
    });
     // "Nouveau courrier électronique reçu"
    console.log(notification.body); // 3"Un e-mail non lu."
  }
  //Événements associés à l'API Notifications
  function otification_event(){
    var MM = new Notification("Hi! My beautiful little princess！",{
      body: 'Vous avez',1Un e-mail provenant de l'espace lointain.
      icon:"../../images/headerPic/20100114212301-1126264202.jpg"
    });
    MM.onshow = function() {
      console.log('Notification showning!');
    };
    MM.onclick = function() {
      console.log('Notification have be click!');
    };
    MM.onerror = function() {
      console.log('Notification have be click!');
      // Fermeture manuelle
      MM.close();
    };
  }
</script>

Voici la totalité du contenu de cet article, j'espère qu'il vous sera utile dans vos études, et j'espère que vous soutiendrez également le tutoriel à crier.

Déclaration : Le contenu de cet article est tiré d'Internet, propriété de ses auteurs respectifs, le contenu est contribué et téléchargé par les utilisateurs d'Internet, ce site ne détient pas de droits de propriété, n'a pas été édité par l'homme, ni assume la responsabilité juridique connexe. Si vous trouvez du contenu suspect de violation de droits d'auteur, vous êtes invités à envoyer un e-mail à : notice#oldtoolbag.com (au moment de l'envoi d'un e-mail, veuillez remplacer # par @ pour faire une plainte et fournir des preuves pertinentes. Une fois confirmé, ce site supprimera immédiatement le contenu suspect de violation de droits d'auteur.

Tutoriel de base