Notificaciones Desktop con HTML5

Tutoriales

Demo Github

En el día de Hoy los Navegadores están cambiando el modo de interactuar con los Sistemas Operativos. Podemos ver que Google Chrome nos envía ciertas notificaciones. Nosotros podemos crear una aplicación la cual nos notifique algún evento mientras estamos trabajando, por ejemplo podemos notificar que tenemos nuevos mensajes de correos en nuestra Bandeja de Gmail u otra Característica que necesitemos  implementar, todo esto lo podemos hacer solamente con HTML 5 y su API nativa de Notificaciones.

Debemos considerar que esta API solo funciona en un servidor, es decir que necesitamos alojar el contenido de nuestra aplicación en un Servidor para que pueda funcionar sin problemas.

Primero creamos nuestra vista con el Botón para mostrar la notificación:

index.html

Ahora desarrollamos las funciones Javascript para ejecutar la Notificación HTML 5:

script.js

Nota: En los comentarios del Código indico para que sirve cada línea de código.

Ahora abajo Antes de cerra la etiqueta body o al final del documento instanciamos el archivo script.js, ya que a veces suele dar error cuando se coloca al inicio del documento como siempre acostumbramos hacer:

Para más detalles y otras funcionalidades Puedes leer la documentación Oficial: http://www.w3.org/TR/notifications/

Espero les sirva de mucho y puedan crear sus aplicaciones con Notificaciones en Tiempo Real.

Gracias por su atención !

Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required