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.
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.
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>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.
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.
Todos hemos estado allí: tienes 20 pestañas abiertas, cinco PDFs y tres hojas de cálculo,…
Si ya estás usando Google Nano Banana, sabes que es la herramienta que está redefiniendo…
¿Te ha pasado? Estás en plena conversación con Gemini, fluyendo con ideas, y de repente……
¿Alguna vez soñaste con ser una de esas figuras coleccionables que tanto te fascinaban de…
Imagina caminar por las calles iluminadas de París al atardecer, con la Torre Eiffel brillando…
¿Imaginas crear aplicaciones inteligentes que resuelvan tus problemas cotidianos sin escribir una sola línea de…
Esta página utiliza cookies para mejorar su rendimiento
Ver comentarios
Hola.
¿Y después como seguimos enviando notificaciones? ¿ tengo que estar modificando el código cada vez que necesite mostrar una notificación?
Puedes crear una función y luego llamarla cuando sea necesario. Así evitas la repetición o modificación de código. ¡Saludos!
alert("Hola que tal");
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/#