L'utilisation de la notification par message HTML5 (Web Notification)

J'ai écrit beaucoup d'articles sur HTML5, mais j'ai toujours l'impression de devoir passer par les API de haut niveau pertinentes. Ce n’est qu’en comprenant le système et en réfléchissant aux problèmes à un niveau supérieur que nous pouvons obtenir le double du résultat avec la moitié de l’effort.

Essayons d'abord l'exemple le plus simple. Ouvrez les outils de développement chrome , collez le code et exécutez-le directement :

 new Notification('Notification de message de Jartto/', { dir : 'rtl', body : 'Ceci est un message, envoyé via notification Web, à titre de test !', icon : 'https://raw.githubusercontent.com /chenfengyanyu/my-web-accumulation/master/images/logo.jpeg'})

Aucune notification de message n'apparaît, que se passe-t-il ? Ne vous inquiétez pas, continuez à lire.

Selon l'exemple ci-dessus, nous l'avons exécuté, mais nous n'avons pas réussi à activer la boîte de message push. A ce moment, vous devez vérifier si l'utilisateur est autorisé. Entrez dans la console : > Notification.permission

Bientôt, nous découvrirons que l'autorisation initiale de l'utilisateur est default . Parce que le choix de l'utilisateur n'est pas connu, le comportement du navigateur est le même que celui de denied .

En voyant ces API HTML5 de haut niveau, il y a toujours quelques inquiétudes. Bien que l’exemple soit bon et facile à utiliser, la compatibilité est une question qui mérite réflexion.

Comme vous pouvez le constater, pratiquement tous les navigateurs le prennent en charge, à l'exception iOS Safari et Opera Mini , les applications mobiles doivent donc être prudentes.

4. Documentation API

Commençons par trier systématiquement l'API. C'est très simple. Il suffit d'y consacrer 5 minutes.

Cas d'utilisation :

 let notification = nouvelle notification (titre, options)

paramètre:

title : le titre de la notification qui sera définitivement affiché

options : un objet autorisé à définir des notifications. Il contient les propriétés suivantes :

• dir : La direction du texte ; sa valeur peut être auto (automatique), ltr (de gauche à droite) ou rtl (de droite à gauche)
• lang : spécifie la langue utilisée dans les notifications. Cette chaîne doit être valide dans le document de balise de langue BCP 47.
• body : chaîne supplémentaire affichée dans la notification
• tag : attribuez un identifiant à la notification afin que la notification puisse être actualisée, remplacée ou supprimée si nécessaire.
• icon : L'URL d'une image qui sera utilisée pour afficher l'icône de notification.

propriété:

Notification.permission : chaîne indiquant l’état d’autorisation de l’affichage de notification actuel. Les valeurs possibles incluent :

• denied (l'utilisateur a refusé l'affichage de la notification),
• granted (l'utilisateur a autorisé l'affichage de la notification),
• default (car le choix de l'utilisateur n'est pas connu, le navigateur se comporte de la même manière que lorsqu'il denied )

méthode:

• Notification.onclick : gère l'événement de clic, qui est déclenché à chaque fois que l'utilisateur clique sur la notification.
• Notification.onshow : gère l'événement show, qui est déclenché lorsque la notification est affichée.
• Notification.onerror : gère l'événement d'erreur, qui est déclenché chaque fois que la notification rencontre une erreur.
• Notification.onclose : gère l'événement de fermeture, qui est déclenché lorsque l'utilisateur ferme la notification.
• Notification.requestPermission() : utilisé pour que la page actuelle demande à l'utilisateur l'autorisation d'afficher des notifications.
• Notification.close() : utilisé pour fermer les notifications.

Notification.requestPermission Cette méthode ne peut être appelée que par le comportement de l'utilisateur (par exemple : événement onclick) et ne peut pas être appelée par d'autres méthodes.

Selon l'API ci-dessus, écrivons un exemple complet :

 function notifyMe(){ // Vérifiez d'abord si le navigateur prend en charge if (!(Notification dans la fenêtre)) { alert(Ce navigateur ne prend pas en charge la notification sur le bureau } // Vérifiez si l'utilisateur accepte de recevoir des notifications sinon if (Notification.); permission = == accordée) { // Si tout va bien, créons une notification var notification = new Notification(Bonjour !); } // Sinon, nous devons obtenir l'autorisation de l'utilisateur sinon if (Notification.permission !== 'denied) ') { Notification.requestPermission(function (permission){ // Si l'utilisateur est d'accord, vous pouvez lui envoyer une notification if (permission === accordée) { var notification = new Notification(Bonjour !); } } } // Enfin , Si l'exécution arrive à ce point, cela signifie que l'utilisateur a refusé d'autoriser les notifications concernées // Par respect, nous ne devons plus les déranger}

Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.