Comment implémenter la fonction de notification de bureau Web Notification en HTML5

Parfois, nous verrons cette invite dans le coin inférieur droit du bureau :

Cette invite de bureau est la nouvelle technologie Web Push Notifications de HTML5.

La technologie de notifications Web permet aux pages d'émettre des notifications qui seront affichées au niveau du système en dehors de la page. Il peut offrir aux utilisateurs une meilleure expérience et ils peuvent recevoir des notifications de message de la page même lorsqu'ils sont occupés par d'autres tâches, comme un rappel d'un nouvel e-mail ou un rappel de message reçu dans une salle de discussion en ligne, etc.

PS : en plus d’IE, tous les principaux navigateurs modernes disposent d’un support de base pour cette version de bureau.

commencer

Pour créer une notification de message, c'est très simple. Il suffit d'utiliser la classe Notification sous l'objet window. Le code est le suivant :

 var n = new Notification (Push du bureau, { icon: 'img/icon.png', body: 'Ceci est ma première notification sur le bureau.', image:'img/1.jpg'});

Ensuite, vous verrez la notification de la capture d'écran que j'ai prise ci-dessus apparaître sur le bureau du système.

PS : La notification du message ne prendra effet que lors de l'accès à la page via le service Web. Si vous double-cliquez directement pour ouvrir un fichier local, cela n'aura aucun effet. C'est-à-dire que votre fichier doit être ouvert sur le serveur au lieu d'utiliser directement le navigateur pour ouvrir le fichier local.

Bien sûr, il est possible que vous ne voyiez rien, alors ne vous inquiétez pas et continuez à lire.

Bien entendu, avant de vouloir afficher la notification ci-dessus, il est nécessaire de comprendre la syntaxe de base d'une notification :

 let myNotification = new Notification(titre, options);

titre : définit un titre pour la notification qui sera affiché en haut de la fenêtre de notification lorsqu'elle sera déclenchée.

L'objet options (facultatif) contient toutes les options de paramètres personnalisés qui s'appliquent à la notification.

body : Le corps de la notification, qui sera affiché sous le titre.

balise : similaire à l'ID de chaque notification afin que la notification puisse être actualisée, remplacée ou supprimée si nécessaire.

icône : icône pour afficher les notifications

image : L'URL de l'image à afficher dans le corps de la notification.

données : toutes les données que vous souhaitez associer à la notification. Il peut s'agir de n'importe quel type de données.

renotify : un booléen qui spécifie si l'utilisateur doit être averti après qu'une nouvelle notification remplace une ancienne. La valeur par défaut est false, ce qui signifie qu'ils ne seront pas avertis.

requireInteraction : indique que la notification doit rester active jusqu'à ce que l'utilisateur clique ou la ferme, plutôt que de la fermer automatiquement. La valeur par défaut est fausse.

Lorsque ce code est exécuté, le navigateur demandera à l'utilisateur s'il autorise le site à afficher des notifications de messages, comme le montre la figure suivante :

Les notifications ne seront affichées que si l'utilisateur clique sur Autoriser et autorise les notifications.

Comment savoir si les clics de l'utilisateur autorisent ou bloquent ?

L'instance Notification de window a une fonction requestPermission pour obtenir le statut d'autorisation de l'utilisateur :

 // Tout d'abord, nous vérifions si nous avons l'autorisation d'afficher des notifications // Sinon, nous demandons l'autorisation if (window.Notification && Notification.permission !== accordée) { Notification.requestPermission(function (status) { //le statut est le statut d'autorisation. //Si l'utilisateur clique sur Autoriser, le statut est 'accordé' // Si l'utilisateur clique sur Désactiver, le statut est 'refusé' // Cela nous permettra d'utiliser Notification.permission si dans Chrome/Safari (Notification.permission !== statut) { Notification.permission = statut } } );

Remarque : Si l'utilisateur clique sur le bouton de fermeture dans le coin supérieur droit de l'autorisation, la valeur du statut est par défaut.

Après cela, il suffit de déterminer si la valeur du statut est accordée pour décider d'afficher ou non la notification.

Mais le simple affichage d'une boîte de message n'est pas attrayant, les notifications de message doivent donc avoir un certain degré d'interactivité et les événements doivent être impliqués avant et après l'affichage du message.

Notification a formulé dès le début une série de fonctions d'événement. Les développeurs peuvent utiliser ces fonctions pour gérer les interactions des utilisateurs de manière globale :

Il y a : onshow, onclick, onerror, onclose.

 var n = new Notification(Desktop push, { icon: 'img/icon.png', body: 'Ceci est ma première notification sur le bureau.'}); //la fonction onshow est déclenchée lorsque la boîte de message est affichée // OK Faire quelques données enregistrées et fermez régulièrement la boîte de message n.onshow = function() { console.log('Display message box'); //Ferme la boîte de message après 5 secondes setTimeout(function() { n.close(); } , 3000);};//Appelé lorsque l'on clique sur la boîte de message //Vous pouvez ouvrir la vue appropriée, fermer la boîte de message et d'autres opérations en même temps n.onclick = function() { console.log('Cliquez sur le message box'); // Ouvre la vue correspondante n.close();};//Lorsqu'une erreur se produit, la fonction onerror sera appelée // S'il n'y a pas d'autorisation accordée, la fonction onerror sera également exécutée lors de la création d'un Instance d'objet de notification n.onerror = function() { console.log('Erreur de boîte de message'); // Faire autre chose}; // La fonction onclose sera appelée lorsqu'une boîte de message est fermée n.onclose = function() { console.log('Fermer la boîte de message' ) ; //Faire autre chose};

un exemple simple

 <!DOCTYPE html><html lang=en> <head> <meta charset=UTF-8 /> <title>Document</title> </head> <body> <button>Cliquez pour lancer la notification</button> < / body> <script> window.addEventListener(load, function() { // Tout d'abord, vérifions si nous avons l'autorisation d'envoyer des notifications // Sinon, nous demandons l'autorisation if (window.Notification && Notification.permission !== accordé) { Notification.requestPermission(function(status) { if (Notification.permission !== status) { Notification.permission = status; } } } var bouton = document.getElementsByTagName(button)[0]; button.addEventListener(click, function() { // Créer une notification si l'utilisateur est d'accord if (window.Notification && Notification.permission === accordé) { var n = new Notification(Hi!); } // Si l'utilisateur ne choisit pas d'afficher ou non les notifications // Remarque : étant donné que dans Chrome, nous ne pouvons pas déterminer si l'attribut d'autorisation a une valeur, il est dangereux de // vérifier si la valeur de cet attribut est la valeur par défaut sinon if (window.Notification && Notification.permission !== refusé) { Notification.requestPermission(function(status) { if (Notification.permission !== status) { Notification.permission = status; } // Si l'utilisateur accepte if (status === accordé) { var n = new Notification(Hi!); // Sinon, nous pouvons compromettre et utiliser l'alerte en mode normal else { alert(Hi! } } ); // Si l'utilisateur refuse d'accepter la notification else { // Nous pouvons compromettre et utiliser l'alerte en mode normal alert(Salut ! } });

Lorsque nous ouvrons l'interface, une demande d'autorisation apparaîtra. Si nous cliquons sur Autoriser puis sur le bouton, une notification sera envoyée au bureau, et nous pouvons voir cette notification dans le coin inférieur droit du bureau.

Ci-dessus, nous affichons simplement un message.

 if (statut === accordé) { var n = new Notification(Hi);}

Si nous avons beaucoup de messages par exemple, j'utilise une boucle for pour simuler un grand nombre de notifications.

 for(var i=0; i<10; i++) { var n = new Notification(Hi,+i);}

Vous pouvez voir que 10 notifications sont affichées. Mais dans certains cas, afficher un grand nombre de notifications peut s’avérer pénible pour les utilisateurs.

Par exemple, si une application de messagerie instantanée invite l'utilisateur à chaque message entrant. Pour éviter d'inonder le bureau d'un utilisateur de centaines de notifications inutiles, il peut être nécessaire de prendre en charge une file d'attente de messages en attente.

Par conséquent, une balise doit être ajoutée à la notification nouvellement créée.

S'il existe une nouvelle notification avec la même balise que la notification précédente, la nouvelle notification remplacera la notification précédente et seule la dernière notification sera affichée sur le bureau.

Toujours en utilisant l'exemple ci-dessus, il vous suffit d'ajouter un attribut de balise à la notification de déclenchement :

 for (var i = 0; i < 10; i++) { // Enfin, seule la notification avec le contenu Hi 9 sera vue var n = new Notification(Hi! + i, {tag: 'soManyNotification'});}

La notification des messages est une bonne fonctionnalité, mais elle n'exclut pas que certains sites utilisent cette fonction de manière malveillante. Une fois que l'utilisateur l'autorise, ils enverront de temps en temps des messages hostiles et perturberont le travail de l'utilisateur. les autorisations du site. Désactivez sa fonction de notification de messages.

Nous pouvons cliquer sur le point d'exclamation sur le côté gauche de la zone de saisie de l'adresse du navigateur et il y aura une option de notification, et nous pourrons modifier l'autorisation. Ou il existe une option pour modifier la notification sur la page de notification, et vous pouvez modifier la notification d'autorisation en fonction de la situation spécifique.

Ainsi, la notification Web la plus basique est implémentée.

Ce qui précède est la méthode d'implémentation de la fonction de notification de bureau Web Notification en HTML5 introduite par l'éditeur. J'espère qu'elle vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Je tiens également à remercier tout le monde pour votre soutien au site d'arts martiaux VeVb !

Si vous pensez que cet article vous est utile, n'hésitez pas à le réimprimer, veuillez indiquer la source, merci !