Notifications API y gestión de permisos

Notification.permission es una cadena estática que refleja el estado actual del permiso. Puede ser "granted" (el usuario lo permitió), "denied" (el usuario lo bloqueó) o "default" (nunca se ha solicitado). Compruebe esta propiedad antes de intentar mostrar notificaciones para evitar errores innecesarios.

Notification.requestPermission() devuelve una Promise que se resuelve con la nueva cadena de permiso. Llámela únicamente como respuesta a una acción clara del usuario, no al cargar la página. Los navegadores ignoran o suprimen las solicitudes de permiso que se muestran inmediatamente al cargar la página, y a los usuarios les resultan molestas cuando aparecen sin contexto.

El patrón más eficaz consiste en mostrar un aviso dentro de la aplicación que explique la ventaja y, a continuación, permitir que el usuario haga clic en "Activar notificaciones" antes de llamar a requestPermission(). Esto proporciona contexto, aumenta las tasas de aceptación y evita que el navegador marque su sitio como abusivo. Nunca solicite permiso al cargar la página.

new Notification(title, options) crea y muestra una notificación del sistema. El primer argumento es la cadena del título. El objeto options es el segundo argumento y acepta propiedades como body (texto del subtítulo), icon (URL de la imagen) y tag para evitar duplicados. Esto solo funciona si el permiso es "granted".

Entre las opciones principales de las notificaciones se incluyen: body para el texto descriptivo situado debajo del título, icon para una imagen pequeña, badge para el pequeño icono monocromático que se muestra en el área de notificaciones del sistema operativo, image para una imagen grande integrada, tag para reemplazar una notificación anterior con la misma etiqueta y requireInteraction: true para mantener la notificación hasta que el usuario interactúe con ella.

La instancia de Notification activa varios eventos: onclick se activa cuando el usuario hace clic en la notificación (utilícelo para enfocar la ventana y navegar), onclose se activa cuando se descarta y onerror se activa si se produce un problema al crearla. Asocie los controladores a la instancia devuelta después de llamar a new Notification().

Guarde la instancia de Notification devuelta en una variable y llame a notification.close() para descartarla mediante programación. Esto resulta útil para las notificaciones urgentes que dejan de ser relevantes después de un tiempo. Combínelo con setTimeout para cerrarla automáticamente después de unos segundos.

La API de notificaciones requiere un contexto seguro. En páginas HTTP, typeof Notification === 'undefined' devuelve ese valor o la API se desactiva por completo, según el navegador. Se trata de una medida de seguridad para evitar que los sitios maliciosos inunden a los usuarios con mensajes de sistema falsos. Compruebe siempre que esté disponible antes de utilizarla.

Un hook useNotifications puede exponer dos métodos: requestPermission() y showNotification(title, options). Internamente, realiza un seguimiento del estado actual del permiso y lo actualiza después de solicitarlo. Los componentes llaman a showNotification sin preocuparse por comprobar los permisos, ya que el hook se encarga de ello internamente.

La API de visibilidad de páginas expone document.hidden y el evento visibilitychange. Las notificaciones tienen más sentido cuando el usuario no está viendo la pestaña en ese momento. Compruebe document.hidden === true antes de mostrar una notificación para evitar alertas redundantes cuando la página ya está en primer plano.

La API de notificaciones que se muestra aquí sirve para las notificaciones activadas localmente desde la propia página. Para recibir notificaciones push incluso cuando la página está cerrada, necesita la Push API combinada con un service worker. El service worker recibe el evento push y llama a self.registration.showNotification() en segundo plano.

¿Cuál de los siguientes NO es un valor válido para Notification.permission?

Notification.permission puede ser granted, denied o default. Solicite siempre el permiso tras una acción del usuario, no al cargar la página. Utilice new Notification(title, options) para crear notificaciones y gestione onclick para enfocar la ventana. Combine esta API con la API de visibilidad para mostrar notificaciones solo cuando la pestaña esté oculta.