La manera más sencilla de mostrar notificaciones en el navegador

La API Web Notification de Javascript te permite mostrar notificaciones, con el contenido que desees, en el navegador tanto en equipos de escritorio, como en dispositivos móviles. Aunque su soporte no es del todo consistente, la API es compatible con la mayoría de navegadores web modernos y ya lo puedes ver implementado en numerosos sitios web y aplicaciones.

En este artículo te mostraremos la manera más sencilla de mostrar notificaciones en el navegador mediante la librería open source Push.js

Vamos a desarrollar una aplicación de ejemplo que solicite permiso al usuario y después, envíe la notificación al hacer clic en el botón. Para simplificarlo todo, trabajaremos en un único archivo index.html con scripts de javascript en su interior.

Lo primero que debemos hacer es incluir la librería. Push.js puede instalarse a través de npm o de un archivo local, pero la forma más sencilla de hacerlo es mediante CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/push.js/0.0.11/push.min.js"></script>

No es obligatoria la librería Push.js para trabajar con notificaciones webs, pero ofrece una API clara y concisa con la que es muy sencillo trabajar comparado con la API nativa Notification. Push.js gestionará permisos, service workers e inconsistencias entre navegadores. Así que no tendrás que preocuparte por nada.

Solicitación de permiso

Los usuarios deberán dar su aceptación al hecho de recibir notificaciones. Esto se lleva a cabo a través de una ventana de diálogo integrada en el navegador que seguramente ya habrás visto millones de veces.

Push.js automáticamente solicita permiso cuando intentamos enviar nuestra primera notificación. De todas maneras, en muchos casos podemos solicitarlo de manera manual mediante este código:

Push.Permission.request();

Esto abrirá una ventana de diálogo integrado en el navegador invitando a los usuarios a aceptar o denegar las notificaciones de la web. Si el permiso ya se ha concedido o denegado, el código anterior será ignorado.

Creando una notificación

Para mostrar una notificación simplemente llamamos al método Push.create, el cual espera un título y un objeto opcional que contenga todo tipo de preferencias útiles y callbacks.

Push.create('Hi there!', {
    body: 'This is a notification.',
    icon: 'icon.png',
    timeout: 8000,               // Timeout before notification closes automatically.
    vibrate: [100, 100, 100],    // An array of vibration pulses for mobile devices.
    onClick: function() {
        // Callback for when the notification is clicked. 
        console.log(this);
    }  
});

Puedes ver las distintas opciones disponibles en este enlace.

Compatibilidad con los navegadores

La API Notification es soportada por la mayoría de los navegadores modernos. Para ver si tu navegador preferido lo admite, prueba a ejecutar esta aplicación de ejemplo que acabamos de desarrollar. Debería funcionar sin problemas en Chrome, Firefox y Safari, así como en Chrome para Android. El único navegador famoso que falta en esta lista es Safari para iOS, que no proporciona ninguna forma de implementar notificaciones web.

Otra cosa importante a tener en cuenta aquí es que para que se muestren las notificaciones en Android, la aplicación web debe estar alojada en HTTPS.

Fuente: tutorialzine.com