API de Notificaciones

En las plataformas compatibles, mostrar una notificación del sistema generalmente implica dos cosas. Primero, el usuario debe otorgar el permiso de origen actual para mostrar las notificaciones del sistema, lo que generalmente se hace cuando se inicializa la aplicación o el sitio, mediante el método Notification.requestPermission(). Esto debe hacerse en respuesta a un gesto del usuario, como hacer clic en un botón, por ejemplo:

btn.addEventListener("click", () => {
  let promise = Notification.requestPermission();
  // esperar por el permiso
});

Esta no es solo la mejor práctica: no debe enviar spam a los usuarios con notificaciones que no aceptaron, sino que, en el futuro, los navegadores rechazarán explícitamente las notificaciones que no se activen en respuesta a un gesto del usuario. Firefox ya está haciendo esto desde la versión 72, por ejemplo.

Esto generará un cuadro de diálogo de solicitud, a lo largo de las siguientes líneas:

Desde aquí el usuario puede optar por permitir las notificaciones de este origen, o bloquearlas. Una vez que se ha hecho una elección, la configuración generalmente persistirá durante la sesión actual.

A continuación, se crea una nueva notificación usando el constructor Notification() (en-US). A esto se le debe pasar un argumento de título y, opcionalmente, se le puede pasar un objeto de opciones para especificar opciones, como la dirección del texto, el cuerpo del texto, el icono para mostrar, el sonido de notificación para reproducir y más.

Además, la especificación de la API de notificaciones especifica una serie de adiciones a la API ServiceWorker, para permitir que los service workers activen las notificaciones.

Notification

Define un objeto de notificación.

ServiceWorkerRegistration (en-US)

Incluye el método ServiceWorkerRegistration.showNotification() (en-US) y ServiceWorkerRegistration.getNotifications() (en-US), para controlar la visualización de notificaciones.

ServiceWorkerGlobalScope (en-US)

Incluye el controlador onnotificationclick (en-US), para activar funciones personalizadas cuando se hace clic en una notificación.

NotificationEvent (en-US)

Un tipo específico de objeto de evento, basado en ExtendableEvent (en-US), que representa una notificación que se ha activado.

• Uso de la API de notificaciones