JASoft.org

El blog de José Manuel Alarcón Aguín. Programación web y mucho más...

MENÚ - JASoft: JM Alarcón

Módulo para notificaciones web desde el navegador con HTML5

campusMVP_Notification

Estos días he estado creando un módulo JavaScript para facilitar el uso de las notificaciones del navegador usando la API estándar "Web Notifications" del World Wide Web Consortium (W3C).

La idea es poder mostrar notificaciones nativas al usuario (de las que aparecen al lado del reloj en Windows, por ejemplo) pero desde aplicaciones web. Por ejemplo, cuando llega un nuevo correo (como hace GMail), o cualquier otra circunstancia que necesitemos notificar en segundo plano al usuario, pero desde el navegador.

Actualmente el único navegador que NO las soporta es Internet Explorer / Edge, y no parece que tengan intención de soportarlas tampoco, pero en todos los demás funcionarán sin problemas.

En su día escribí un artículo explicando con detalle cómo utilizarlas "a pelo", sin usar ninguna biblioteca intermedia. Esto es una especie de continuación. Lo que he hecho es crear una biblioteca que, en mi opinión, hace más sencillo el uso de esta característica. Además homogeniza cuestiones como el tiempo de mostrar una notificación o el estado actual de permisos para mostrarlas.

Se trata de un modulo dual y se puede utilizar tanto directamente, incluyéndolo con una etiqueta <script> normal y corriente, como mediante inyección de dependencias con AMD (por ejemplo con Require.js).

He creado un repositorio en GitHub que incluye:

  • Documentación completa del módulo, con explicaciones de las funciones expuestas, su funcionamiento, etc... De momento está solo en inglés, pero entiendo que no debería suponer demasiado problema.
  • El código fuente completo (WebNotifications.js). Incluye comentarios explicativos para entender mejor cómo funciona.
  • La versión minimizada del módulo (WebNotifications.min.js), para usarlo con la mínima carga posible (962 bytes). Incluye un archivo de mapa (WebNotifications.min.js.map) para ayudar a la depuración en producción si fuera necesario.
  • Un archivo de ejemplo de uso (WebNotificationsTest.htm) que implementa todas las funcionalidades para comprobar que funcionan (debe usarse desde un servidor web: en local no funcionará).

¡Espero que lo encuentres útil!

José Manuel Alarcón José Manuel Alarcón
Fundador de campusMVP.es, el proyecto de referencia en formación on-line para programadores en lengua española. Autor de varios libros y cientos de artículos. Galardonado como MVP de Microsoft desde 2004. Gallego de Vigo, amante de la ciencia y la tecnología, la música y la lectura. Ayudando a la gente en Internet desde 1996.
Descarga GRATIS mi último libro (no técnico): "Tres Monos, Diez Minutos".
Banner

Comentarios (11) -

Estoy usando Firefox, la última versión, y cuando uso los archivos que tienes en GitHub el inspector me dice: ReferenceError: WebNotifications is not defined

¿Hago algom mal?

Responder

by Jose M. Alarcon

Hola Marcus:

Lo acabo de probar de nuevo por si acaso hubiera habido algún cambio en Firefox que pueda hacer romper la biblioteca, y me ha funcionado sin problemas el archivo de ejemplo.

¿Has probado el archivo de ejemplo que se incluye?
¿Lo has probado en un servidor, aunque sea local, y no directamente desde el disco duro?

Responder

hola, queria saber si es necesario tener la ventana del sitio abierta , entre a un sitio y habilite las noticifaciones y aprecen asi no tenga abierto el sitio, de hecho facebook tambien las envia con el navegador cerrado.
como puedo generarlas si es que la ventana del sitio esta cerrada?
gracias

Responder

by Jose M. Alarcon

Hola:

Para hacer eso necesitas una tecnología totalmente distinta llamada "Service workers" y que de momento solo está soportada por Chrome.

Puedes leer más sobre esto y algunas cuestiones relacionadas en un artículo que he escrito hace poco: www.campusmvp.es/.../...-Progressive-Web-Apps.aspx

Saludos.

Responder

Christian

Justamente tengo esa misma duda, porque he visto otros sitios web donde aparecen las notificaciones aunque tenga minimizado el navegador.

Otra pregunta, ¿es posible reproducir un sonido cuando aparezca la notificación?

Responder

Christian

Me respondo a mí mismo, hice un botón para configurar las notificaciones explícitamente (como el html de ejemplo) y solo así aparecen las notificaciones aunque tenga minimizado el navegador, al principio había configurado Firefox desde los ajustes de la página pero veo que sale mejor que sea con el botón.

Ya hice lo del sonido, solo agregué un tag <audio> de HTML5 e invoco el método play() desde la misma función de javascript donde muestro la notificación.

Ahora tengo otra duda, se puede mostrar código HTML (para texto formateado por ejemplo) en el cuerpo de la notificación?

Responder

Hola! Quisiera saber si es posible cambiar la ubicación de la ventana? .. por ejemplo en la parte superior derecha...slds

Responder

by Jose M. Alarcon

No, no es posible. Eso lo controla el sistema operativo, y además cambia dependiendo de dónde tenga el usuario la barra de tareas, si es Windows,Mac o Linux, etc...

Saludos.

Responder

Hola!

Muy buen artículo.

Entoces si entiendo bien, esto es  una ventana del S.O
La ventaja de esto frente a la típica capa "div" que colocas donde quieras, cuando quieras y sin permiso, es que estás notificaciones las ves cuando el navegador está  minimizado, ¿no?

Responder

by Jose M. Alarcon

Hola Joseba:

No es necesariamente una ventana del S.O. Depende del sistema y del navegador. En Chrome en Windows, por ejemplo, son ventanas propias y no usan el centro de notificaciones de Windows 10. Sin embargo en Mac, Chrome sí que utiliza notificaciones nativas desde el año pasado  (developers.google.com/.../native-mac-os-notifications).

Eso sí, salen fuera del navegador, que es a lo que te refieres, y sí que permiten que los usuarios las vean aunque el navegador esté minimizado. De hecho, si además las combinas con Service Workers en segundo plano, el navegador no tendría ni que estar abierto para poder lanzar notificaciones.

Saludos.

Responder

Christian

Ya logré integrar las notificaciones a una aplicación web que tengo, lastimosamente no pude ponerle texto formateado con HTML en el cuerpo de la notificación pero es funcional. Como tip, si quieren poner un salto de línea, pongan \n como se hace en javascript.

Por cierto, las notificaciones ya son soportadas por Edge.

Responder

Pingbacks and trackbacks (1)+

Agregar comentario