Sugerencia rápida:la forma más fácil de mostrar las notificaciones del navegador

La API de notificación web de JavaScript permite que los navegadores de escritorio y móviles muestren notificaciones con contenido personalizado. Aunque su soporte solía ser bastante inconsistente, la API ahora es compatible con la mayoría de los navegadores modernos y ya la estamos viendo implementada en muchos sitios web y aplicaciones.

En este artículo, le mostraremos la forma más rápida de configurar las notificaciones del navegador utilizando la biblioteca Push.js de código abierto.

Configuración del proyecto

Queremos crear una aplicación de demostración simple que solicite permiso y luego envíe una notificación al hacer clic en el botón. En aras de la sencillez trabajaremos en un solo index.html archivo con scripts en línea. La fuente completa está disponible en GitHub.

Lo primero que tenemos que hacer es incluir la biblioteca. Push.js se puede instalar a través de npm o un archivo local, pero la forma más fácil de implementarlo es a través de CDN:

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

La biblioteca Push.js no es necesaria para trabajar con notificaciones web, pero ofrece una API limpia con la que es mucho más fácil trabajar en comparación con la API de notificación nativa. Push.js manejará los permisos, los trabajadores del servicio y las inconsistencias entre navegadores, por lo que no tenemos que hacerlo.

Solicitud de permiso

Los usuarios deben dar permiso antes de que podamos enviarles notificaciones. Esto se hace a través de un cuadro de diálogo integrado en el navegador que probablemente ya haya visto:

Push.js solicita permiso automáticamente cuando intentamos enviar nuestra primera notificación. Sin embargo, en muchos casos queremos preguntar manualmente a los usuarios de antemano:

Push.Permission.request();

Esto abrirá el cuadro de diálogo del navegador incorporado que solicita a los usuarios que acepten o rechacen recibir notificaciones. Si ya se ha concedido o denegado el permiso, se ignorará el código anterior.

Crear una notificación

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

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 todas las opciones disponibles aquí.

En nuestra demostración, mostramos una notificación al hacer clic en el botón, pero no se requiere la interacción del usuario:se pueden crear nuevas notificaciones en cualquier momento, incluso cuando la pestaña no está activa en ese momento.

Asegúrate de no molestar demasiado a los usuarios. Envíe una notificación solo cuando desee actualizarlos sobre algo importante, como un nuevo mensaje de texto o una nueva solicitud de amistad.

Compatibilidad del navegador

La API de notificación es compatible con la mayoría de los navegadores modernos. Para ver si su navegador de elección lo admite, intente ejecutar nuestra aplicación de demostración. Debería funcionar sin problemas en Chrome, Firefox y Safari de escritorio, así como en Chrome para Android. El único cliente popular que falta en esta lista es iOS Safari, que no proporciona ningún tipo de notificación web.

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

Lecturas adicionales

Las notificaciones son una adición relativamente nueva al mundo de los navegadores, pero podemos esperar ver más y más de ellas, especialmente a medida que las aplicaciones web progresivas se vuelven más populares. Si desea obtener más información sobre las notificaciones de JavaScript, aquí hay un gran recurso que le recomendamos que consulte:

  • Una entrada de blog del creador de Push.js, explicando por qué creó el proyecto y sus planes futuros para él, aquí.
  • Push API:una nueva e increíble API que permite a los usuarios recibir notificaciones incluso cuando una aplicación web no está abierta, aquí.
  • ¿Qué hace una buena notificación? - Un artículo de Google Developers sobre cómo mejorar las notificaciones - aquí.