Objetivos del blog.
Después de leer este blog, podrá configurar la notificación de escritorio para su sitio. También podrá personalizar su notificación por su propio mensaje, imagen, icono, etc.
Beneficio de la notificación de escritorio
Supongamos que desea notificar a su cliente fuera de la página web, entonces podemos usar la notificación de escritorio como si hubiera habilitado la notificación de escritorio para correo electrónico, no necesita revisar los correos electrónicos con regularidad. En cada correo electrónico, tienes una notificación.
Código para la notificación de escritorio
Agregue la siguiente función en la etiqueta de script en la cabecera del HTML.
función showNotification () {// Verifique si el navegador del usuario admite notificaciones o no si (! ("Notificación" en la ventana)) {alerta ("Su navegador no admite la notificación de escritorio"); } // Verifique si los permisos de la notificación ya se han otorgado o no si (Notification.permission === "concedido") {// Crear notificación var options = {body: 'Línea de mensaje de notificación simple 1. \ NSegunda línea de mensaje de notificación . ', // cuerpo de la notificación dir:' ltr ', // dirección del mensaje ltr: de izquierda a derecha. rtl: de derecha a izquierda. imagen: 'https://www.knowband.com/blog/wp-content/uploads/2016/09/cropped-knowband_logo-v2.png', // Agregar imagen si es necesario para mostrar el icono: 'https: // www .knowband.com / blog / wp-content / uploads / 2016 / 09 / cropped-knowband_logo-v2.png ', // Agregar el icono si es necesario para mostrar} var title = "Knowband Blog"; var notification = nueva notificación (título, opciones); // Agregar la notificación haga clic en el enlace notification.onclick = function (event) {event.preventDefault (); // evita que el navegador enfoque la ventana de la pestaña de Notificación. se abre ('https://www.knowband.com/blog/', '_blank'); notification.close (); // Cerrar la notificación después de hacer clic}} // Si no hay permisos, solicite al usuario otro permiso si (Notification.permission! == "denegado") {Notification.requestPermission (). Luego (función ( permiso) {// Si el usuario acepta, vamos a crear una notificación si (permiso === "concedido") {var notification = nueva Notificación ("Hola!");}}); }}
Puede activar esta función a través del evento como desee. Para propósitos de prueba, puede verificar esto agregando un botón. Usa el siguiente código para el botón en el cuerpo
<button onclick = "showNotification ()"> Show Notification! </button>
Nota: Si está ejecutando este código en el sistema local, use el servidor local, es decir, localhost.
Pantalla de salida
