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 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.

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>