Crear notificaciones de escritorio con Javascript

Crear notificaciones de escritorio con Javascript

Hoy te muestro una funcionalidad poco conocida que te permite crear notificaciones de escritorio con Javascript mediante un sencillo ejemplo y una demo para que veas el funcionamiento, tambien checaremos cuestiones de compatibilidad de navegadores con esta funcionalidad.

Lo que haremos el dia de hoy será algo parecido a un post que he publicado hace un tiempo donde veiamos como crear notificaciones push para un blog, con la diferencia de que veremos como hacer algo parecido a este funcionamiento desde cero con Javascript.

Nuestro ejemplo lucirá de esta forma:

crear notificaciones de escritorio con javascript 2

crear notificaciones de escritorio con javascript 2

crear notificaciones de escritorio con javascript 3

crear notificaciones de escritorio con javascript 3

Puedes ver un demo del funcionamiento que haremos el día de hoy en el siguiente enlace: demo de notificaciones de escritorio con Javascript.


¿Sabías que?

¿Necesitas hosting wordpress? WebEmpresa te ofrece un servicio super rápido, excelente soporte en español y certificado SSL gratuito:

WebEmpresa

Código para crear notificaciones de escritorio con  Javascript

<html>
<head>
	<meta charset="utf-8">
	<title>Ejemplo de notificaciones</title>
</head>
<body>
	<button onclick="notificar();" >Enviar notificación</button>
	
	<script>
		if(Notification.permission !== "granted"){
			Notification.requestPermission();
		}
		
		function notificar(){
			if(Notification.permission !== "granted"){
				Notification.requestPermission();
			}else{
				var notificacion = new Notification("Titulo",
					{
						icon: "https://jonathanmelgoza.com/wp-content/themes/jonathanmelgoza/images/header_menu_rs_btn.png",
						body: "Texto de la notificación"
					}
				);
				
				notificacion.onclick = function(){
					window.open("https://jonathanmelgoza.com/blog/");
				}
			}
		}
	</script>
</body>
</html>

 

Compatibilidad de las notificaciones en Javascript

Te dejo esta imagen con la compatibilidad de las notificaciones en navegadores.

crear notificaciones de escritorio con javascript

crear notificaciones de escritorio con javascript

Más informacion en: https://developer.mozilla.org/es/docs/Web/API/notification

Clic para valorar esta información
[Total: 0 Promedio: 0]