Una de las funcionalidades más útiles en el desarrollo web son las notificaciones por lo que hoy veremos cómo crear notificaciones push con Push.js, una librería JavaScript que nos permite gestionarlas de forma fácil y rápida.

Las notificaciones push son increíblemente útiles, nos permiten avisar a los usuarios de eventos importantes.

Actualmente estoy desarrollando un portal de clientes y en este tema las notificaciones tipo push juegan un papel importante.

La verdad es que es muy fácil configurar notificaciones y su beneficio es enorme.

Hoy veremos cómo crear notificaciones push con Push.js, una librería JavaScript bastante simple de utilizar.

Cabe mencionar que ya antes habíamos visto el tema de las notificaciones web con el artículo crear notificaciones de escritorio con JavaScript.

Lo que vamos a hacer el día de hoy es algo similar a esto:

Notificaciones Push con Push.js - ejemplo

Para comenzar vamos a la página de Push.js (o más directamente vamos a su repositorio) y nos hacemos de la librería.

Importamos jQuery

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Para este ejemplo utilizaré jQuery pero realmente no es necesario.

Importamos también la librería Push.js

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

Vamos a crear dos botones que nos ayudarán a ejemplificar la funcionalidad de Push.js

<button id="autorizarNotificacion">Autorizar notificaciones</button>
<button id="mostrarNotificacion">Mostrar notificaciones</button>

Definimos los eventos de nuestros botones al cargar la página

$(document).ready(function(){

	$("#autorizarNotificacion").on("click", function(){

		autorizarNotificacion();

	});

	$("#mostrarNotificacion").on("click", function(){

		mostrarNotifiacion();

	});

});

Como puedes ver llamamos a un par de funciones separadas donde veremos el funcionamiento con mayor detalle.

La función mostrarNotificacion() nos permitirá crear la notificación que se mostrará

function mostrarNotifiacion(){

		Push.create("Hola mundo",{
			body: "Este es el cuerpo de la notificacion",
			icon: "img/logo.png",
			timeout: 4000,
			onClick: function () {
				window.focus();
				this.close();
		}
	});

}

En este código puedes ver que podemos establecer el texto, icono, tiempo para que desaparezca y acciones que se ejecutarán al hacer clic sobre ella.

Puedes ver más opciones de configuración en:

https://pushjs.org/docs/options

Hasta aquí todo fácil pero nos falta una cosa importante, permitir las notificaciones.

Y es que el usuario debe de permitir recibir notificaciones de tu sitio.

Para esto es el botón y función de autorizarNotificacion();

function autorizarNotificacion(){

	Push.Permission.request(onGranted, onDenied);

}

Con esto el navegador solicitará permisos al usuario de que tu sitio le envie notificaciones.

Desde aquí pueden pasar dos cosas: que el usuario las permita o que se niege.

Si queremos podemos crear funciones que se ejecuten dependiendo de la elección del usuario.

El usuario permitió las notificaciones

function onGranted(){

	$("#autorizarNotificacion").css("background-color", "green");

}

El usuario denegó las notificaciones

function onDenied(){

	$("#autorizarNotificacion").css("background-color", "red");

}

En este caso lo único que hago es pintar el botón de rojo o verde según si consiguió o no el permiso del usuario.

Este es un ejemplo sencillo de notificaciones push con Pusj.js pero que nos permite conocer a detalle la librería y el funcionamiento necesario.

Ahora ya podremos incluir esta funcionalidad en nuestros proyectos y adecuarlo a lo que necesitamos en cada caso particular.

Si esta información sobre cómo crear notificaciones push con Pusj.js te fue de utilidad no olvides compartirla en tus redes sociales y dejarnos un comentario en la sección de abajo si tienes cualquier duda respecto al tema del día de hoy, será un placer ayudarte.

¡Hasta luego!

Clic para valorar esta información

[Total: 3 Promedio: 5]

jonathan__melgoza