Notificaciones Web HTML5 con JavaScript

Notificaciones Web HTML5 con JavaScript | QuéCódigo.com
Hola,

En esta ocasión quería llevar un tema que hace mucho realicé y que por alguna razón en su momento encontré muy poca información.

Estamos hablando de las típicas Notificaciones de escritorio, últimamente ya toda aplicación tiene estas notificaciones de escritorio, más que todo las vemos en la aplicación de WhatsApp Web.

Para implementar esta API en nuestro sitio web, primero tenemos que conocer cuales navegadores soportan esta característica y en cuales versiones del navegador podemos usarlo. En este sentido contamos con Caniuse.

Al ser esta característica propia de JavaScript no necesitamos incluir ninguna librería.

Ahora vamos a conocer cómo implementarlo con pocas líneas de código.

Primero debemos verificar si el navegador del usuario soporta esta característica con una simple condicional podemos saberlo.

JSif (!("Notification" in window)) {
alert("This browser does not support desktop notification");
}


Ahora que conocemos que es soportado por el navegador, procedemos a solicitar permiso al usuario para enviarle la notificación. Es muy importante este paso, pues sin la autorización del usuario no podemos hacer uso de las notificaciones.

JSif (Notification.permission !== 'denied') {
Notification.requestPermission(function (permission) {
// Acción si el usuario acepta.
});
}


Ya vimos como solicitamos permisos al usuario, y dentro de este vimos una condicional que pregunta si el usuario no ha negado la solicitud, ahora si el usuario la acepta se haría de la siguiente manera.

JSif (Notification.permission === "granted") {
// Si está bien vamos a crear una notificación.
}


Las notificaciones son un objeto en JavaScript bajo el nombre “notification”, por lo tanto, inicializamos el objeto, utilizando la sentencia de declaración “new” y como el mismo tiene varios métodos, es recomendable inicializar el objeto cargándolo a una variable de referencia para hacer uso, de una forma estructurada.

JS// Vamos a ver si ya se han concedido permisos de notificación
if (Notification.permission === "granted") {
// Si está bien vamos a crear una notificación
// Primero vamos a crear una variables las
// cuales forman nuestra norificación
var body = "Hola";
var icon = "https://www.quecodigo.com/img/qc_logo.jpg";
var title = "Notificación";
var options = {
body: body, //El texto o resumen de lo que deseamos notificar.
icon: icon, //El URL de una imágen para usarla como icono.
lang: "ES", //El idioma utilizado en la notificación.
tag: 'notify', //Un ID para el elemento para hacer get/set de ser necesario.
dir: 'auto', // izquierda o derecha (auto).
renotify: "true" //Se puede volver a usar la notificación, default: false.
}
// Creamos la notificación con las opciones que pusimos arriba.
var notification = new Notification(title,options);
// Cerramos la notificación.
setTimeout(notification.close.bind(notification), 5000);
}


Como vimos al objeto "notification" le pasamos parámetros, en este caso dos: el primero es el título de nuestra notificación que será presentada al usuario y el segundo es otro objeto que contiene las propiedades con las cuales personalizamos nuestra notificación.

El método notifications recibe los siguientes parámetros.



body: Contenido de la notificación.

icon: Url del icono (imagen).

tag: ID de la notificación, como nuestro identificador.

dir: Dirección del texto (izquierda, derecha o auto).

sound: Sonido al lanzar la notificación [No soportada]

Puedes leer más en: Notification#Propiedades_de_Instancia

Las notificaciones de escritorio aceptan los siguientes eventos.



onclick
Al hacer click dentro de la notificación, podemos determinar que acción tomar, desde alertar al usuario hasta redirigirlo a una url.

onerror
Este evento nos permite realizar una o varias acciones en caso de que se produzca un error al intentar notificar al usuario. Por ejemplo, que algún parámetro no sea correcto o error de sintaxis al programar.

onshow
Permite realizar una acción inmediatamente se muestre la notificación al usuario.

onclose
OnClose nos permite realizar una acción cuando el usuario haga click sobre la x para cerrar la notificación. Por ejemplo, presentar otra notificación.

Aquí les dejo un código completo, personalizado con sonido.

HTML<html>
<head>
<meta charset="UTF-8">
<title>Notificaciones JavaScript</title>
<script charset="UTF-8">
function notifyMe() {
//Vamos a comprobar si el navegador es compatible con las notificaciones
if (!("Notification" in window)) {
alert("This browser does not support desktop notification");
}
// Vamos a ver si ya se han concedido permisos de notificación
else if (Notification.permission === "granted") {
// Si está bien vamos a crear una notificación
var body = "Hola";
var icon = "https://www.quecodigo.com/img/qc_logo.jpg";
var title = "Notificación";
var options = {
body: body,
icon: icon,
lang: "ES",
renotify: "true"
}
var notification = new Notification(title,options);
var audio = new Audio('https://www.quecodigo.com/sounds/notificacion.mp3');
audio.play();
notification.onclick = function () {
//action
};
setTimeout(notification.close.bind(notification), 5000);
}
// De lo contrario, tenemos que pedir permiso al usuario
else if (Notification.permission !== 'denied') {
Notification.requestPermission(function (permission) {
// Si el usuario acepta, vamos a crear una notificación
if (permission === "granted") {
var notification = new Notification("Gracias, Ahora podras recibir notifiaciones de nuestra página");
}
});
}
// Por fin, si el usuario ha denegado notificaciones, y usted
// Quiere ser respetuoso no hay necesidad de preocuparse más sobre ellos.
}
</script>
</head>
<body>
<button onclick="notifyMe()">Notificame!</button>
</body>
</html>




Aquí esta el primer articulo que presente del mismo: ver articulo anterior.

Saludos
Imagen Externa
admin usuario de Qué Código
Edinson Tique ADMIN

Estudiante de Ingeniería en Sistemas de Información, pro-activo y amante a la tecnología.
Los ordenadores han estado mucho tiempo en mi vida, desde pequeño empece aprendiendo manejo y mantenimiento de computadores, cuando obtuve acceso al Internet siempre quise saber como funcionaba y que era una página web, así que me dedique a aprender todo lo que pueda de programación enfocada a la web, ese aprendizaje y lectura de documentación fueron mis juegos desde los 11 años, actualmente cuento con conocimientos en Electrónica y programación en Arduino, Servidores, PHP, JavaScript, CSS y HTML...

Qué Código
Qué Código