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.
¿Quieres poner texto detrás de un video? Aprende cómo con CapCut en este sencillo tutorial…
Aprende a crear voces con IA sorprendentemente reales para vídeos, podcasts y más. Lee nuestro…
TikTok se reinventa con TikTok Notes: una app de fotos y estilo de vida. Conoce…
¡Descubre Haiper! La alternativa gratuita a Sora de OpenAI para crear vídeos increíbles. Fácil de…
¿Buscas una alternativa a ChatGPT? Mistral AI y su chatbot Le Chat ofrecen una experiencia…
Más que un resumen: Adobe AI Assistant te ayuda a navegar y comprender PDFs con…
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/#