Como Disparar Notificaciones de Escritorio desde el Navegador Web

 in Javascript  tagged javascript / notification by

Las notificaciones de escritorio sirven para tomar en cuenta cierta informacion, ya sea desde mensajes importantes o publicidad, veamos como hacerlas.

Las notificaciones de escritorio se pueden lanzar desde el navegador web ya sea google chorme, firefox, microsoft edge entre otros navegadores.

Para lanzar o disparar notificaciones debemos usar un documento html, este archivo html o pagina web debe estar alojado en un servidor web ya sea local(para pruebas) o remoto.

El codigo del documento es algo facil y debemos tomar en cuenta la API Notification de javascript disponible para los navegadores modernos.

Ejemplos de uso

Las notificaciones de escritorio se pueden usar de muchas formas, para mostrarle al usuario cuando una tarea a finalizado, para darle mas información sobre un proceso al usuario, para alertarlo de tomar una decisión, para enviarle una noticia, entre muchas cosas mas.

API Notification

Aunque la API Notification es extensa como todas las APIs debemos tener en cuenta las funciones basicas para el uso cotidiano.

Solicitar permisos

Debemos solicitar permiso al usuario, si quiere ver notificaciones debe aceptar o denegar.

Notification.requestPermission().then(function(result) {
console.log(result);
});

La variable result tendra el resultado, puede ser granted si el usuario acepta o denied si el usuario rechaza la peticion.

Verificacion de permiso

Si el usuario acepta o rechaza las notificaciones lo verificamos con una condicional.

	if (Notification.permission === "granted") {
	    /// Mas codigo
	}else {
		alert("No aceptaron las notificaciones.");
	}

Mostrar Notificacion

Para mostrar una notificacion usamos el Objeto Notification

    var notification = new Notification("Hola notificacion1 !");

Notificacion personalizada

La notificacion mas personalizada incluye, titulo, cuerpo e icono o imagen.

		var options = {
		body: "Notificacion2 con imagen y evento",
		icon: "motocross1.jpg"
		}
		var notification2 = new Notification("Nueva notificacion!", options);

Click a la notificacion

La variable de cada notificacion tiene el evento onclick para realizar acciones en caso de que el usuario haga click.

notification2.onclick = function(e){
	var notification3 = new Notification("Gracias por hacer click en la notificacion 2");
}

Cerrar notificacion

Cada notificacion tiene el evento close para cerrar la notificacion.

notification2.close()

Ejemplo Completo

En el siguiente ejemplo se muestra todo el código desde solicitar permiso al usuario y usar un par de botones para lanzar o disparar las notificaciones.

<!DOCTYPE html>
<html>
<head>
<title>Notifications</title>
</head>
<body>
<h1>Notifications</h1>
<br>
<button id="not1">Notificacion 1</button>
<button id="not2">Notificacion 2</button>
<script type="text/javascript">
Notification.requestPermission().then(function(result) {
console.log(result);
});
document.querySelector("#not1").onclick = function(){
if (Notification.permission === "granted") {
var notification = new Notification("Hola notificacion1 !");
}else {
alert("No aceptaron las notificaciones.");
}
}
document.querySelector("#not2").onclick = function(){
if (Notification.permission === "granted") {
var options = {
body: "Notificacion2 con imagen y evento",
icon: "motocross1.jpg"
}
var notification2 = new Notification("Nueva notificacion!", options);
notification2.onclick = function(e){
var notification3 = new Notification("Gracias por hacer click en la notificacion 2");
}
}
}
// powered by Evilnapsis
</script>
</body>
</html>
view raw notification1.html hosted with ❤ by GitHub

En windows 10 las notificaciones se deben ver mas o menos asi.

A ustedes que les parece las notificaciones de escritorio ?

Leave a comment