Cómo implementar la función de notificación de escritorio de notificación web en HTML5

En ocasiones veremos este mensaje en la esquina inferior derecha del escritorio:

Este mensaje de escritorio es la nueva tecnología de notificaciones push web de HTML5.

La tecnología de notificaciones web permite que las páginas emitan notificaciones que se mostrarán a nivel del sistema fuera de la página. Puede brindar a los usuarios una mejor experiencia, incluso cuando los usuarios están ocupados con otros trabajos, pueden recibir notificaciones de mensajes desde la página, como un recordatorio de un nuevo correo electrónico o un recordatorio de mensaje recibido en una sala de chat en línea, etc.

PD: Además de IE, todos los principales navegadores modernos tienen soporte básico para este push de escritorio.

comenzar

Para crear una notificación de mensaje, es muy simple. Simplemente use la clase Notificación debajo del objeto de ventana. El código es el siguiente:

 var n = nueva notificación (push de escritorio, {icono: 'img/icon.png', cuerpo: 'Esta es mi primera notificación de escritorio', imagen: 'img/1.jpg'});

Luego verá aparecer la notificación de la captura de pantalla que tomé arriba en el escritorio del sistema.

PD: La notificación del mensaje solo tendrá efecto cuando se acceda a la página a través del servicio web. Si hace doble clic directamente para abrir un archivo local, no tendrá ningún efecto. Es decir, su archivo debe abrirse en el servidor en lugar de usar directamente el navegador para abrir el archivo local.

Eso sí, es posible que no veas nada, así que no te preocupes y continúa leyendo.

Por supuesto, antes de que desee que aparezca la notificación anterior, es necesario comprender la sintaxis básica de una notificación:

 let myNotification = new Notification(título, opciones);

título: define un título para la notificación que se mostrará en la parte superior de la ventana de notificación cuando se active.

El objeto de opciones (opcional) contiene las opciones de configuración personalizadas que se aplican a la notificación.

cuerpo: El cuerpo de la notificación, que se mostrará debajo del título.

etiqueta: Similar al ID de cada notificación para que la notificación pueda actualizarse, reemplazarse o eliminarse cuando sea necesario.

icono: icono para mostrar notificaciones

imagen: la URL de la imagen que se mostrará en el cuerpo de la notificación.

datos: Cualquier dato que desee asociar con la notificación. Puede ser cualquier tipo de datos.

renotify: booleano que especifica si se debe notificar al usuario después de que una nueva notificación reemplaza a una anterior. El valor predeterminado es falso, lo que significa que no serán notificados.

requireInteraction: indica que la notificación debe permanecer activa hasta que el usuario haga clic en ella o la cierre, en lugar de cerrarse automáticamente. El valor predeterminado es falso.

Cuando se ejecuta este código, el navegador le preguntará al usuario si desea permitir que el sitio muestre notificaciones de mensajes, como se muestra en la siguiente figura:

Las notificaciones se mostrarán solo si el usuario hace clic en Permitir y autoriza las notificaciones.

¿Cómo saber si los clics del usuario permiten o bloquean?

La instancia de Notificación de la ventana tiene una función requestPermission para obtener el estado de autorización del usuario:

 // Primero, verificamos si tenemos permiso para mostrar notificaciones // Si no, solicitamos permiso if (window.Notification && Notification.permission !== concedido) { Notification.requestPermission(function (status) { //status es el estado de autorización // Si el usuario hace clic en Permitir, el estado es "concedido" // Si el usuario hace clic en Desactivar, el estado es "denegado" // Esto nos permitirá usar Notification.permission si estamos en Chrome/Safari. (Notificación.permiso! == estado) { Notificación.permiso = estado;

Nota: Si el usuario hace clic en el botón cerrar en la esquina superior derecha de la autorización, el valor del estado es el predeterminado.

Después de eso, solo necesitamos determinar si se otorga el valor de estado para decidir si mostrar la notificación.

Pero simplemente mostrar un cuadro de mensaje no es atractivo, por lo que las notificaciones de mensajes deben tener un cierto grado de interactividad y los eventos deben estar involucrados antes y después de mostrar el mensaje.

La notificación ha formulado una serie de funciones de eventos desde el principio. Los desarrolladores pueden utilizar estas funciones para manejar las interacciones del usuario de manera integral:

Hay: onshow, onclick, onerror, onclose.

 var n = new Notification(Desktop push, { icon: 'img/icon.png', body: 'Esta es mi primera notificación de escritorio.'}); //la función onshow se activa cuando se muestra el cuadro de mensaje // OK Do algunos datos registran y cierran el cuadro de mensaje regularmente n.onshow = function() { console.log('Mostrar cuadro de mensaje' //Cerrar el cuadro de mensaje después de 5 segundos setTimeout(function() { n.close(); } , 3000);};//Se llama cuando se hace clic en el cuadro de mensaje //Puede abrir la vista relevante, cerrar el cuadro de mensaje y otras operaciones al mismo tiempo n.onclick = function() { console.log('Haga clic en el mensaje box'); // Abre la vista correspondiente n.close();};// Cuando ocurre un error, se llamará a la función onerror // Si no se otorga autorización, la función onerror también se ejecutará al crear una Instancia de objeto de notificación n.onerror = function() { console.log('Error del cuadro de mensaje'); // Hacer otras cosas}; // La función onclose se llamará cuando se cierre un cuadro de mensaje n.onclose = function() { console.log('Cerrar el cuadro de mensaje'); ) ; //Hacer algo más};

un ejemplo sencillo

 <!DOCTYPE html><html lang=en> <head> <meta charset=UTF-8 /> <title>Documento</title> </head> <body> <button>Haga clic para iniciar la notificación</button> < / body> <script> window.addEventListener(load, function() { // Primero, verifiquemos si tenemos permiso para enviar notificaciones // Si no, solicitamos permiso if (window.Notification && Notification.permission !== concedido) { Notificación.requestPermission(función(estado) { if (Notificación.permiso !== estado) { Notificación.permiso = estado; } }} var botón = document.getElementsByTagName(botón)[0]; button.addEventListener(click, function() { // Crea una notificación si el usuario está de acuerdo if (window.Notification && Notification.permission === concedido) { var n = new Notificación(¡Hola!); } // Si el usuario no elige si desea mostrar notificaciones // Nota: debido a que en Chrome no podemos determinar si el atributo de permiso tiene un valor, no es seguro // verificar si el valor de este atributo es el valor predeterminado else if (ventana.Notificación && Notificación.permiso! == denegado) { Notificación.requestPermission(función(estado) { if (Notificación.permiso!== estado) { Notificación.permiso = estado; } // Si el usuario está de acuerdo if (status === concedido) { var n = new Notification(Hola! } // De lo contrario, podemos comprometernos y usar el modo normal alert else { alert(Hola! }); // Si el usuario se niega a aceptar la notificación else { // Podemos comprometernos y utilizar la alerta de modo normal (¡Hola! } } });

Cuando abrimos la interfaz, aparecerá una solicitud de autorización. Si hacemos clic en Permitir y luego hacemos clic en el botón, se enviará una notificación al escritorio y podremos ver esta notificación en la esquina inferior derecha del escritorio.

Arriba solo mostramos un mensaje.

 if (estado === concedido) { var n = nueva notificación (Hola);}

Si tenemos muchos mensajes, por ejemplo, uso un bucle for para simular una gran cantidad de notificaciones.

 for(var i=0; i<10; i++) { var n = nueva Notificación(Hola,+i);}

Puede ver que se muestran 10 notificaciones. Pero en algunos casos, mostrar una gran cantidad de notificaciones puede resultar doloroso para los usuarios.

Por ejemplo, si una aplicación de mensajería instantánea solicita al usuario cada mensaje entrante. Para evitar inundar el escritorio de un usuario con cientos de notificaciones innecesarias, puede que sea necesario hacerse cargo de una cola de mensajes pendientes.

Por lo tanto, es necesario agregar una etiqueta a la notificación recién creada.

Si hay una nueva notificación con la misma etiqueta que la notificación anterior, la nueva notificación reemplazará a la notificación anterior y solo se mostrará la última notificación en el escritorio.

Siguiendo con el ejemplo anterior, solo necesita agregar un atributo de etiqueta a la notificación de activación:

 for (var i = 0; i < 10; i++) { // Finalmente, solo se verá la notificación con contenido Hola! var n = new Notification(Hi! + i, {tag: 'soManyNotification'});}

La notificación de mensajes es una buena característica, pero no descarta que algunos sitios usen esta función de manera maliciosa una vez que el usuario la autoriza, de vez en cuando enviarán algunos mensajes hostiles que perturbarán el trabajo del usuario. En este momento, podemos eliminarlos. los permisos del sitio. Deshabilite su función de notificación de mensajes.

Podemos hacer clic en el signo de exclamación en el lado izquierdo del cuadro de entrada de la dirección del navegador y habrá una opción de notificación y podremos modificar la autorización. O hay una opción para modificar la notificación en la página de notificación, y puede modificar la notificación de autorización según la situación específica.

Entonces se implementa la notificación web más básica.

Lo anterior es el método de implementación de la función de notificación de escritorio de notificación web en HTML5 presentado por el editor. Espero que le resulte útil. Si tiene alguna pregunta, déjeme un mensaje y el editor le responderá a tiempo. ¡También me gustaría agradecer a todos por su apoyo al sitio web de artes marciales VeVb!

Si cree que este artículo le resulta útil, puede reimprimirlo. Indique la fuente, ¡gracias!