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.

 

Calificación de Lectores
[Total: 3 Media: 4]

5 thoughts on “Notificaciones en el navegador con Html5 y Javascript

  1. Hola.

    ¿Y después como seguimos enviando notificaciones? ¿ tengo que estar modificando el código cada vez que necesite mostrar una notificación?

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Usamos cookies para personalizar su experiencia. Si sigue navegando estará aceptando su uso. Más Información | Cerrar