Notificaciones Desktop con HTML5

2 minuto(s)

Demo Github

En el día de Hoy los Navegadores están cambiando el modo de interactuar con los Sistemas Operativos. Podemos ver que Google Chrome nos envía ciertas notificaciones. Nosotros podemos crear una aplicación la cual nos notifique algún evento mientras estamos trabajando, por ejemplo podemos notificar que tenemos nuevos mensajes de correos en nuestra Bandeja de Gmail u otra Característica que necesitemos implementar, todo esto lo podemos hacer solamente con HTML 5 y su API nativa de Notificaciones.

Debemos considerar que esta API solo funciona en un servidor, es decir que necesitamos alojar el contenido de nuestra aplicación en un Servidor para que pueda funcionar sin problemas.

Primero creamos nuestra vista con el Botón para mostrar la notificación:

index.html


<div class="row">

  <div class="col-md-12">
	        	
     <h3 align="center">Esta es una Demo de Notificaciones con HTML 5 </h3>

     <h4 align="center" style="color:purple; margin-top:26px;">Presiona en Botón para ver la Notificación:</h4>

     <div style="text-align:center; margin-top:50px;">					
     <button type="button" class="btn btn-warning btn-lg" id="btn_notificar" role="button">Notificar !</button>
     </div>
	        	
   </div>

</div>

<h3 align="center">Esta es una Demo de Notificaciones con HTML 5 </h3>

<h4 align="center" style="color:purple; margin-top:26px;">Presiona en Botón para ver la Notificación:</h4>

<button type="button" class="btn btn-warning btn-lg" id="btn_notificar" role="button">Notificar !</button>

</div>

Ahora desarrollamos las funciones Javascript para ejecutar la Notificación HTML 5:

script.js

Nota: En los comentarios del Código indico para que sirve cada línea de código.


// Validamos y activamos el Permiso para Notificar
if(Notification.permission!=="granted") {
	Notification.requestPermission();
}

// Instanciamos el botón, para que al hacer Click en el, se proceda a lanzar la Notificación o un mensaje para actualizar el Navegador
document.getElementById("btn_notificar").addEventListener("click", onNotificationButtonClick);

// Validamos si el Navegador soporta las Notificaciones en HTML 5
function onNotificationButtonClick() {
	if (!isNotificationSupported()) {
		logg("Tu navegador no soporta Notificaciones. Por favor, utiliza una versión Reciente del Navegador Google Chrome o Safari.");
	return;
	}

	// Si el Navegador soporta las Notificaciones HTML 5, entonces que proceda a Notificar
	var notificacion = new Notification("Tienes nuevos Mensajes !", {
	    icon: 'img/gmail.png',
	    body: 'Abrir Bandeja de Gmail.'
	});

	// Redireccionamos a un determinado Destino o URL al hacer click en la Notificación
	notificacion.onclick = function() {
		window.open("https://gmail.com/");
	};					
}
		
// Solicitamos los Permisos del Sistema
function requestPermissions() {

}

// Luego del Permiso del Sistema, le indicamos que nos Muestre la Notificación
function isNotificationSupported() {
	return ("Notification" in window);
}

// Mostramos el Mensaje de la Notificación
function logg(mensaje) {
	notificador.innerHTML += "<p>"+mensaje+"</p>";
}

// Validamos y activamos el Permiso para Notificar

if(Notification.permission!=="granted") {

Notification.requestPermission();

}

// Instanciamos el botón, para que al hacer Click en el, se proceda a lanzar la Notificación o un mensaje para actualizar el Navegador

document.getElementById("btn_notificar").addEventListener("click", onNotificationButtonClick);

// Validamos si el Navegador soporta las Notificaciones en HTML 5

function onNotificationButtonClick() {

if (!isNotificationSupported()) {

logg("Tu navegador no soporta Notificaciones. Por favor, utiliza una versión Reciente del Navegador Google Chrome o Safari.");

return;

}

// Si el Navegador soporta las Notificaciones HTML 5, entonces que proceda a Notificar

var notificacion = new Notification("Tienes nuevos Mensajes !", {

icon: 'img/gmail.png',

body: 'Abrir Bandeja de Gmail.'

});

// Redireccionamos a un determinado Destino o URL al hacer click en la Notificación

notificacion.onclick = function() {

window.open("https://gmail.com/");

};

}

// Solicitamos los Permisos del Sistema

function requestPermissions() {

}

// Luego del Permiso del Sistema, le indicamos que nos Muestre la Notificación

function isNotificationSupported() {

return ("Notification" in window);

}

// Mostramos el Mensaje de la Notificación

function logg(mensaje) {

notificador.innerHTML += "<p>"+mensaje+"</p>";

}

Ahora abajo Antes de cerra la etiqueta body o al final del documento instanciamos el archivo script.js, ya que a veces suele dar error cuando se coloca al inicio del documento como siempre acostumbramos hacer:


<script src="js/script.js" type="text/javascript"></script>

Para más detalles y otras funcionalidades Puedes leer la documentación Oficial: https://www.w3.org/TR/notifications/

Espero les sirva de mucho y puedan crear sus aplicaciones con Notificaciones en Tiempo Real.

Gracias por su atención !

HTML 5 Tutoriales
01-11-2015
16-09-2018
Crear un Post - Eventos Devs - Foro

Notificaciones Desktop con HTML5

Demo Github

index.html

script.js

Todas Nuestras Páginas y Categorías:

Partners