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 y director 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.
Mi último libro (no técnico): "Tres Monos, Diez Minutos".
Banner

Comentarios (4) -

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

Pingbacks and trackbacks (1)+

Agregar comentario