Notificaciones en el navegador con Html5 y Javascript
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:
<script src="https://cdnjs.cloudflare.com/ajax/libs/push.js/0.0.11/push.min.js"></script>o bien descargarla desde su repositirio oficial e incluirla en nuestra web:
<script src="ruta/push.min.js"></script>Html5 y JavaScript
Aquí os dejo un ejemplo del código que vamos a utilizar para mostrar las notificaciones en el navegador:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title> Push - Notificaciones JavaScript </title>
</head>
<body>
<h1>Push</h1>
<p>Notificaciones JavaScript para equipos de escritorio.</p>
<!--Recuerda modificar la ruta de la librería Push-->
<script src="ruta/push.min.js"></script> <!-- Si hemos descargado el archivo -->
<script>
//A continuación os explico el funcionamiento básico de las notificaciones
Push.create("Notificaciones AJ Creativo", { //Titulo de la notificación
body: "Desarrollador Web y Gráfico.", //Texto del cuerpo de la notificación
icon: 'https://tuwebcreativa.com/images/imagen.png', //Icono de la notificación
timeout: 6000, //Duración de la notificación
onClick: function () {//Función que se cumple al realizar clic cobre la notificación
window.location = "https://tuwebcreativa.com"; //Redirige a la siguiente web
this.close(); //Cierra la notificación
}
});
</script>
</body>
</html>
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.
-
-
DuNNe dice:
Puedes crear una función y luego llamarla cuando sea necesario. Así evitas la repetición o modificación de código. ¡Saludos!
-
-
Alberto Rangel dice:
Es posible que la notificación salga en la parte izquierda en vez de la derecha
-
Si, en la última actualización se muestra en el lateral izquierdo. Aquí puedes ver la demo: https://pushjs.org/#
-
DuNNe 
Alberto Rangel Deja una respuesta
Hola.
¿Y después como seguimos enviando notificaciones? ¿ tengo que estar modificando el código cada vez que necesite mostrar una notificación?