Saltar al contenido

Notificaciones en el navegador con Html5 y Javascript

20 abril, 2018
notificaciones en el navegador

Las notificaciones en el navegador nos permiten mostrar diferentes contenido a los usuarios que visiten nuestra página. Aprende a generarlos fácilmente con este tutorial de html5 y javascript.

¿Cómo generar notificaciones en el navegador?

Agregar notificaciones en el navegador con JavaScript es extremadamente sencillo gracias a la librería JavaScript Push.js esta librería se encarga de mostrar notificaciones en el navegador.

Si necesitas más información te recomiendo que visites la documentación de Push.js en el siguiente enlace.

Preparando nuestro proyecto

Vamos a desarrollar una aplicación de ejemplo que solicite permiso al usuario y después, envíe la notificación al hacer clic en el botón. Para simplificarlo todo, trabajaremos en un único archivo index.html con scripts de javascript en su interior.

Lo primero que debemos hacer es incluir la librería Push.js:

o bien descargarla desde su repositirio oficial e incluirla en nuestra web:

Html5 y JavaScript

Aquí os dejo un ejemplo del código que vamos a utilizar para mostrar las notificaciones en el navegador:

Recuerda ejecutar el index.html en un servidor local para que las notificaciones funcionen correctamente.

Cuando cargamos la página por primera vez nos pedirá que le demos permiso para mostrar notificaciones de esta web.

Una vez concedido, se nos mostrara la notificación, en la parte inferior derecha de nuestra pantalla.

Compatibilidad con los navegadores

La API Notification es soportada por la mayoría de los navegadores modernos, es decir, Chrome, Firefox y Safari, y como habéis visto es muy sencillo de implementarlas.

Espero que os haya sido de gran utilidad, y si os gustó compartáis con vuestros amigos en las redes sociales.