Mediante las notificaciones del navegador puedes avisar de distintos hechos a los visitantes, como por ejemplo, recordarle eventos importantes, o simplemente, avisarles de que tienen un nuevo mensaje en tiempo real. Para que me entiendas, lo que vamos a implementar hoy es como el aviso que recibes en tu dispositivo móvil cada vez que te llega un whatsapp. A pesar de parecer muy complejo, es una función muy simple de implementar, solo necesitarás unas cuantas líneas de Javascript para poder interactuar con el sistema de notificaciones de tu navegador. Para este tutorial, lo utilizamos para mostrar artículos interesantes de programacion.net cada 3 minutos. ¿Quieres saber como llevar a cabo esto en tu proyecto web? Estate atento...
Inicializar el sistema de notificaciones del navegador
Este código inicializará el sistema de notificaciones del navegador. Si quieres saber más sobre esto, échale un vistazo a este enlace de Vanilla JS.
document.addEventListener('DOMContentLoaded', function ()
{
if (Notification.permission !== "granted")
{
Notification.requestPermission();
}
});
Notificaciones push
Esta función te ayudará a mostrar información dentro de notificaciones push. No olvides modificar la URL de la variable icon. Los parámetros de esta función son tres: el título, la descripción y la URL.
function notifyBrowser(title,desc,url)
{
if (Notification.permission !== "granted")
{
Notification.requestPermission();
}
else
{
var notification = new Notification(title, {
icon:'http://YourWebsite.com/logo.png',
body: desc,
});
/* Remove the notification from Notification Center when clicked.*/
notification.onclick = function () {
window.open(url);
};
/* Callback function when the notification is closed. */
notification.onclose = function () {
console.log('Notification closed');
};
}
}
Array de datos
El array contiene una serie de artículos de nuestra página web, ya sabes, programacion.net.
var articles = [ [ "Cómo reproducir sonidos en una notificación utilizando jQuery", "http://programacion.net/articulo/como_reproducir_sonidos_en_una_notificacion_utilizando_jquery_1473" ], [ "Sistema de likes como el de Facebook con jQuery, MySQL y PHP", "http://programacion.net/articulo/sistema_de_likes_como_el_de_facebook_con_jquery-_mysql_y_php_1472" ], [ "Subida de imágenes múltiple sin refrescar la página en Ajax con jQuery", "http://programacion.net/articulo/subida_de_imagenes_multiple_sin_refrescar_la_pagina_en_ajax_con_jquery_1471" ], [ "Cómo implementar una verificación por email con PHP", "http://programacion.net/articulo/como_implementar_una_verificacion_por_email_con_php_1470" ], [ "Cómo bloquear la subida de imágenes de desnudos con PHP", "http://programacion.net/articulo/como_bloquear_la_subida_de_imagenes_de_desnudos_con_php_1469l" ], ...... ...... ...... ];
jQuery
En la sentencia $("#notificationButton").click(function(){}, notificationButton es el ID del botón.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function()
{
$("#notificationButton").click(function()
{
var x = Math.floor((Math.random() * 10) + 1); /* Random number between 1 to 10 */
var title =articles[x][0];
var desc ='Most popular article.';
var url =articles[x][1];
notifyBrowser(title,desc,url);
return false;
});
});
</script>
//HTML Code
<input type="button" id="notificationButton" />
Vanilla JS
Javascript puro y duro
<script>
document.addEventListener('DOMContentLoaded', function()
{
document.querySelector("#notificationButton").addEventListener("click", function(e)
{
var x = Math.floor((Math.random() * 10) + 1); /* Random number between 1 to 10 */
var title =articles[x][0];
var desc ='Most popular article.';
var url =articles[x][1];
notifyBrowser(title,desc,url);
e.preventDefault();
});
});
</script>
//HTML Code
<input type="button" id="notificationButton" />
SettimeOut
A esta función se la llama cada dos minutos y refresca la información de nuestras notificaciones. Puedes modificar los milisegundos si así lo necesitas
<script>
setTimeout(function(){
var x = Math.floor((Math.random() * 10) + 1); /* Random number between 1 to 10 */
var title =articles[x][0];
var desc ='Most popular article.';
var url =articles[x][1];
notifyBrowser(title,desc,url);
}, 120000); //calls every 2 minutes
</script>
Fuente: 9lessons.info