Objectifs du blog
Après avoir lu ce blog, vous pourrez configurer la notification de bureau pour votre site. Vous pourrez également personnaliser votre notification par votre propre message, image, icône, etc.
Avantages de la notification de bureau
Supposons que vous souhaitiez avertir votre client en dehors de la page Web, nous pouvons utiliser la notification de poste de travail comme si vous aviez activé la notification de poste de travail pour le courrier électronique, vous n'avez pas besoin de vérifier régulièrement les courriers électroniques. Dans chaque email, vous avez une notification.
Code pour la notification de bureau
Ajoutez la fonction ci-dessous dans la balise de script dans l'en-tête du code HTML.
function showNotification () {// Vérifie si le navigateur de l'utilisateur prend en charge les notifications ou non si (! ("Notification" dans la fenêtre))) {alert ("Votre navigateur ne prend pas en charge la notification de poste de travail"); } // Vérifie si les autorisations de notification ont déjà été accordées ou non, sinon (Notification.permission === "accordée") {// Créer une notification var options = {body: 'Ligne de message de notification simple 1. \ NSeconde ligne du message de notification . ', // corps du répertoire de notification:' ltr ', // direction du message ltr: de gauche à droite. RTL: de droite à gauche. image: 'https://www.knowband.com/blog/wp-content/uploads/2016/09/cropped-knowband_logo-v2.png', // Ajoutez une image si nécessaire pour afficher l'icône: 'https: // www. .knowband.com / blog / wp-content / uploads / 2016 / 09 / cropped-knowband_logo-v2.png ', // Ajouter une icône si nécessaire pour afficher} var title = "Blog de la bande de connaissances"; var notification = new Notification (titre, options); // Ajouter la notification, cliquez sur le lien notification.onclick = function (event) {event.preventDefault (); // empêche le navigateur de focaliser l'onglet de la notification window.open ('https://www.knowband.com/blog/', '_blank'); notification.close (); // Ferme la notification après avoir cliqué}} // S'il n'y a pas de permission, demandez à l'utilisateur une autre permission si (Notification.permission! == "refusé") {Notification.requestPermission (). then (fonction ( permission) {// Si l'utilisateur accepte, créons une notification si (permission === "accordée") {var notification = new Notification ("Bonjour!");}}); }}
Vous pouvez déclencher cette fonction à travers un événement à votre guise. À des fins de test, vous pouvez le vérifier en ajoutant un bouton. Utilisez le code ci-dessous pour le bouton dans le corps
<button onclick = "showNotification ()"> Afficher la notification! </ button>
Remarque : Si vous exécutez ce code sur le système local, utilisez le serveur local, c’est-à-dire localhost.
Écran de sortie
