/ JavaScript

Push Notificaciones de JavaScript Para Equipos de Escritorio

Agregar notificaciones con JavaScript en equipos de escritorio es extremadamente sencillo gracias a la librería JavaScript Push.js esta librería se encarga de mostrar notificaciones en el navegador.

Recuerda visitar la página de la documentación oficial de Push.js, para mejor información.

Push.js se integra fácilmente con librería de terceros ver su documentación.

¿Que son notificaciones de escritorio?

Son mensajes que te muestra una determinada página cuando hay algún cambio o quiera realizar alguna promoción. Estas notificaciones están presentes en Facebook por ejemplo, y se muestran cuando tus amigos hacen determinadas interacciones como comentar, compartir entre otras cosas.

En este tutorial vamos a ver la manera de como implementar notificaciones para equipos de escritorio utilizando la librería antes mencionada.

Sitio web & repositorio GitHub

Push

Push

Implementación

Vamos a implementar la librería Push.js para que vean lo fácil que se hace realizar notificaciones de escritorio con esta librería JavaScript.

Primero que todo tenemos que descargar la librería de preferencia desde su repositorio oficial, una ves descargado el proyecto Push.js, descomprimimos el archivo .zip, luego accedemos a la sub carpeta bin de la carpeta generada, dentro de esta sub carpeta encontraremos la librería push.min.js en cual usaremos en nuestro proyecto.

HTML y JavaScript

<!DOCTYPE html>
<html lang="es">
	<head>
		<meta charset="UTF-8">
		<title>Push - Notificaciones JavaScript para equipos de escritorio</title>
	</head>
<body>

	<h1>Push</h1>
	<p>Notificaciones JavaScript para equipos de escritorio.</p>
	<!--Recuerda modificar la ruta de la librería Push-->
	<script src="ruta/push.min.js"></script>
	<script>
		//Todo el código que se encuentra aquí se auto explica 
		Push.create("Luis Rene Mas Mas", { //Titulo de la notificación
			body: "Desarrollador front-end.", //Texto del cuerpo de la notificación
			icon: 'https://01luisrene.com/content/images/2017/04/autor.png', //Icono de la notificación
			timeout: 6000, //Tiempo de duración de la notificación
			onClick: function () {//Función que se cumple al realizar clic cobre la notificación
				window.location = "https://01luisrene.com"; //Redirige a la siguiente web
				this.close(); //Cierra la notificación
			}
		});
	</script>
</body>
</html>

Una vez implementado recuerda ejecutar el archivo HTML en un servidor web local, para que funcione correctamente.

Al cargar la página por primera vez pedirá al usuario que le de permiso para mostrar notificaciones de esta web.

Permiso para mostrar notificaciones

Una vez concedido el permiso, se nos mostrara la notificación, en la parte inferior derecha de nuestra pantalla.

Notificación

De aquí en adelante ya estas listo para mejorar la notificación con un lenguaje de desarrollo back-end.


Descargar

Puedes descargar el ejemplo para que puedas ver su funcionamiento.

Ejemplo Push.js

Luis Rene Mas Mas

Luis Rene Mas Mas

Hola, soy desarrollador Frontend, me encanta las tecnologías web, mi pasatiempo favorito es administrar este blog.

Leer Más