PWA no muestra notificaciones en Windows: causas y soluciones

Si tu PWA no muestra notificaciones en Windows, no eres el único. Muchos usuarios se encuentran con que las llamadas, avisos o mensajes no saltan en la esquina inferior derecha como sí ocurre con las aplicaciones de escritorio, aunque la PWA esté instalada y aparentemente bien configurada.

En este artículo vas a ver, con bastante detalle, por qué una PWA puede no mostrar notificaciones en Windows y qué debes revisar tanto en el navegador (Chrome, Edge, etc.) como en el propio sistema operativo, además de entender cómo funcionan en realidad las notificaciones push y qué debe implementar un desarrollador para que todo esto funcione como toca.

Qué es exactamente una PWA y cómo debería comportarse con las notificaciones

Una aplicación web progresiva (PWA) es, simplificando, una web “empaquetada” que se puede instalar en tu equipo y se comporta casi como una app nativa: tiene su icono, se abre en una ventana propia y puede funcionar en segundo plano, usar caché para trabajar sin conexión, recibir mensajes push, etc.

La clave es que, aunque se sienta como una app de escritorio, sigue dependiendo del navegador y del service worker que haya registrado esa PWA. No es un .exe tradicional, sino un conjunto de archivos web (HTML, JS, CSS, service worker, manifiesto, etc.) que el navegador gestiona.

Para que una PWA pueda recibir y mostrar notificaciones push, se combinan varios elementos:

• API de Notificaciones: es la que pide permiso al usuario y muestra el aviso visual.
• Push API: permite que el navegador reciba mensajes push desde un servidor.
• Service worker: un script en segundo plano que escucha los eventos push y lanza la notificación, incluso cuando la PWA no está en primer plano.
• Servidor back-end: envía los mensajes push usando protocolos y claves VAPID.

Si alguno de estos pasos falla (por ejemplo, el service worker no maneja el evento push o notificationclick), la experiencia será que la PWA no notifica nada, o que el navegador muestra algo muy genérico que apenas ves.

Diferencias importantes entre Chrome y Edge para notificaciones en Windows

Una de las causas más habituales por las que una PWA no muestra notificaciones en Windows es el comportamiento distinto de los navegadores. Chrome y Edge gestionan procesos en segundo plano de forma diferente, y eso afecta directamente a las notificaciones push.

En Google Chrome, para recibir notificaciones de una PWA necesitas que haya al menos una de estas condiciones:

• Tener alguna ventana de Chrome abierta.
• Tener abierta la ventana de la PWA instalada en Chrome.

Si cierras completamente todas las ventanas del navegador y de la PWA, incluso aunque tengas activada la opción de “Continuar ejecutando aplicaciones en segundo plano cuando se cierra Google Chrome”, en la práctica dejarás de recibir notificaciones de muchas PWAs, especialmente de las que dependen de que el proceso esté activo de verdad y no solo en modo muy reducido. Si experimentas retrasos, consulta soluciones para notificaciones tardías.

Para mejorar la fiabilidad, conviene que la PWA se inicie automáticamente cuando inicias sesión en Windows. En muchas PWAs instaladas con Chrome puedes hacerlo así:

1. Abre la PWA y pulsa en el menú de los tres puntos verticales.
2. Entra en “Información de la app” o ajustes de la app.
3. Activa la opción “Iniciar la aplicación al iniciar sesión”.
4. En la configuración general de Chrome, ve a Sistema y activa “Continuar ejecutando aplicaciones en segundo plano cuando se cierra Google Chrome”.

Aun así, si cierras todas las ventanas de Chrome y de la PWA, hay escenarios en los que las notificaciones de llamadas o avisos en tiempo real simplemente no se entregan. Es una limitación práctica que muchos usuarios notan con aplicaciones como clientes de telefonía o mensajería basadas en PWA.

En Microsoft Edge en Windows 10 y 11 el comportamiento es más favorable para las notificaciones: Edge puede permanecer activo como proceso en segundo plano aunque cierres todas sus ventanas, gracias sobre todo a la función Startup Boost en el apartado de Sistema y rendimiento.

Cuando Startup Boost está activado, Edge arranca junto con Windows y mantiene procesos en segundo plano preparados. Eso hace que, aunque cierres la ventana de la PWA o la del navegador, las notificaciones push sigan llegando y se muestren en el centro de notificaciones de Windows.

Para que tu PWA en Edge tenga más posibilidades de notificar siempre, revisa:

• En Edge, entra en Ajustes > Sistema y rendimiento.
• Activa “Iniciar Microsoft Edge al iniciar sesión en el dispositivo” o Startup Boost.
• Activa “Continuar ejecutando extensiones y aplicaciones en segundo plano cuando Microsoft Edge está cerrado”.
• En la propia PWA, suele aparecer una opción de “Iniciar aplicación al iniciar sesión” cuando la instalas; déjala marcada.

Con esta configuración, Edge se queda “vivo” por detrás y te seguirán saltando las notificaciones de la PWA aunque la ventana esté minimizada o aparentemente cerrada.

Por qué no ves el típico recuadro emergente abajo a la derecha con la PWA

Muchos usuarios preguntan si la PWA puede mostrar una ventana emergente en la esquina inferior derecha al entrar una llamada, igual que las apps de escritorio clásicas de VoIP o mensajería. La respuesta depende de cómo esté integrada la PWA con el sistema de notificaciones de Windows.

Las notificaciones de una PWA no se pintan “a mano” como una ventana flotante propia, sino a través del sistema de notificaciones del navegador y de Windows. Si todo está bien implementado, deberías ver un banner de notificación estándar de Windows con el texto, icono y, si toca, botones de acción.

Si en tu caso, al recibir una llamada en la PWA, no ves ningún aviso en pantalla cuando la ventana está minimizada, pueden estar pasando varias cosas:

• La aplicación solo muestra un aviso interno en la propia ventana y no usa la API de notificaciones.
• El service worker no está reaccionando al evento push o no llama a showNotification.
• Las notificaciones de esa PWA o del navegador están bloqueadas en Windows o en la configuración del propio navegador.
• La app de escritorio tiene una lógica específica para mostrar un popup tipo “toast” propio que la PWA no replica.

Desde el punto de vista técnico, sí es posible que una PWA instalada muestre notificaciones visibles e integradas con el centro de acciones de Windows, tanto con Chrome como con Edge, pero hay que cumplir todos los requisitos de permisos, suscripción y manejo en el service worker que veremos a continuación.

Cómo funcionan las notificaciones push en PWAs (lado cliente y servidor)

Para que no queden dudas de por qué una PWA puede no notificar, conviene entender el flujo completo, que es el mismo se use Blazor, JavaScript puro o cualquier otro framework: la base son la Push API y la API de Notificaciones, más el service worker.

En el lado del servidor, la app necesita claves criptográficas VAPID (pública y privada). Esas claves identifican al servidor que envía las notificaciones y permiten cifrar la carga de los mensajes push. Pueden generarse con herramientas de línea de comandos (PowerShell, Node, IIS, HSM, etc.) o servicios online de confianza.

La clave pública se envía al cliente y se usa cuando la PWA se suscribe a las notificaciones push. La clave privada se queda estrictamente en el servidor y solo sirve para firmar las notificaciones que se envían a los navegadores; nunca debe filtrarse al cliente.

Cuando el usuario acepta recibir notificaciones, el navegador crea una suscripción de notificación que contiene:

• Un endpoint (URL) donde el servidor enviará los mensajes.
• Claves específicas del usuario, como p256dh y auth, que se almacenan en la base de datos del servidor.

Esa suscripción se suele serializar a un objeto (por ejemplo, una clase NotificationSubscription con propiedades Url, P256dh y Auth) y se guarda asociada al usuario autenticado. Así, el servidor puede enviar mensajes a cada usuario o dispositivo concreto más adelante.

En PWAs basadas en Blazor WebAssembly (como la famosa demo de Blazing Pizza), todo este proceso se hace a través de un archivo JavaScript, por ejemplo pushNotifications.js, que:

• Obtiene el service worker registrado.
• Comprueba si ya existe una suscripción; si no, llama a pushManager.subscribe con userVisibleOnly: true y la clave de servidor pública.
• Devuelve los datos de la suscripción (endpoint, p256dh, auth) al código C#.

Luego, el cliente envía esa suscripción al servidor vía una petición HTTP (por ejemplo, un PUT /notifications/subscribe) que la guarda en la base de datos, eliminando suscripciones antiguas del mismo usuario si hace falta.

En el back-end, un método del estilo SendNotificationAsync usa una librería como WebPush (en .NET) o bibliotecas equivalentes en otros lenguajes para construir el PushSubscription, agregar los detalles VAPID (mail de contacto, clave pública y privada) y enviar el mensaje con una carga JSON: texto del mensaje, URL del recurso que se quiere abrir, etc.

Sin embargo, incluso si el servidor envía correctamente la notificación push, el navegador no va a mostrar nada útil si el service worker de la PWA no está preparado. Por eso, en el service worker (por ejemplo, service-worker.js) hay que escuchar el evento push y llamar a registration.showNotification con los datos adecuados.

Un ejemplo típico en el service worker sería algo así:

self.addEventListener('push', event => {
  const payload = event.data.json();
  event.waitUntil(
    self.registration.showNotification('Nombre de la app', {
      body: payload.message,
      icon: 'img/icon-512.png',
      vibrate: ,
      data: { url: payload.url }
    })
  );
});

Con este manejador, la PWA puede mostrar una notificación enriquecida con icono, vibración (en móviles) y una URL para abrir al hacer clic. Si falta este código, o si el service worker no se ha actualizado correctamente, verás que no te aparece ningún banner aunque el servidor esté enviando mensajes.

Además, se puede escuchar el evento notificationclick para actuar cuando el usuario hace clic en la notificación, por ejemplo abriendo la ventana de la PWA con la página adecuada:

self.addEventListener('notificationclick', event => {
  event.notification.close();
  event.waitUntil(clients.openWindow(event.notification.data.url));
});

Si la PWA está instalada, esta lógica hace que al pulsar la notificación se abra la app; si no lo está, se abrirá el sitio web en el navegador.

Permisos, suscripción y centro de notificaciones en Windows 10 y 11

A nivel de usuario, aunque el desarrollador lo haya hecho todo bien, es habitual que el problema esté en los permisos de notificaciones, tanto en el navegador como en Windows. Hay que revisar todas las capas.

Primero, la PWA o el sitio original tienen que pedir permiso mediante la API Notification.requestPermission(). Normalmente se hace en respuesta a una acción del usuario (por ejemplo, clic en un botón para activar avisos), nunca al cargar la página, para no resultar invasivo.

El código suele ser algo como:

button.addEventListener("click", () => {
  Notification.requestPermission().then(permission => {
    if (permission === "granted") {
      console.log("El usuario ha aceptado las notificaciones");
    }
  });
});

Una vez concedidos los permisos, puedes comprobar más tarde si siguen activos consultando Notification.permission y reaccionar en consecuencia (por ejemplo, no intentar suscribir si es “denied”).

Después, Edge o Chrome registran la suscripción push con registration.pushManager.subscribe. Si el usuario revoca el permiso o lo deniega, esta llamada lanza una DOMException y no se creará ninguna suscripción. En ese caso comprueba los ajustes de notificaciones de Chrome en Windows 10.

Por último, entra en juego Windows. Aunque el navegador tenga permiso para mostrar notificaciones, si en el sistema las notificaciones están desactivadas globalmente o para esa aplicación concreta, no verás el clásico banner en la esquina inferior derecha.

En Windows 10 y 11, conviene revisar:

• Que las notificaciones generales estén activadas en Configuración > Sistema > Notificaciones (gestionar notificaciones en Windows 10).
• Que la opción “Mostrar notificaciones en la pantalla de bloqueo” y “Permitir que las notificaciones reproduzcan sonidos” estén habilitadas.
• Dentro de “Obtener notificaciones de estos remitentes”, comprobar que el navegador (Edge, Chrome) o la app asociada a la PWA aparezca con las notificaciones activadas.

También hay que tener muy en cuenta el Asistente de concentración (Focus Assist). Si está en “Solo alarmas” o “Solo prioridad”, muchas notificaciones de apps y PWAs no saltarán en pantalla, aunque sí puedan acumularse en el centro de notificaciones.

Para revisarlo rápidamente:

• Haz clic en el icono de notificaciones en la parte inferior derecha de la barra de tareas.
• Localiza el botón de Asistente de concentración (icono de luna).
• Ve pulsando hasta que muestre el estado “Desactivado”.

Muchas veces, simplemente con ajustar estos aspectos en Windows, una PWA que parecía “muerta” empieza a mostrar banners y a comportarse como se esperaba.

Notificaciones, distintivos y trabajo en segundo plano en una PWA

Más allá de las notificaciones push clásicas, las PWAs cuentan con otras APIs para trabajar en segundo plano y volver a captar la atención del usuario sin abusar de los pop-ups.

Por un lado tenemos las APIs de sincronización en segundo plano (background sync), sincronización periódica y captura en segundo plano, que permiten actualizar datos, sincronizar contenido cuando vuelve la conectividad o hacer tareas que no requieren interacción directa del usuario en ese momento.

Para avisar al usuario posteriormente, además de las notificaciones visuales, se pueden usar los distintivos de app (app badging), que son esos pequeños contadores de mensajes o avisos pendientes en el icono de la PWA.

Cuando el navegador soporta la API de app badging, se puede comprobar así:

if (navigator.setAppBadge) {
  console.log("La App Badging API está soportada");
}

Si existe, la PWA puede marcar el icono con un número o simplemente un punto:

// Distintivo vacío
navigator.setAppBadge();

// Distintivo con número
navigator.setAppBadge(42);

Y para limpiarlo, basta con llamar a navigator.clearAppBadge() o bien establecer el valor a 0 con setAppBadge(0). Es una forma menos intrusiva de indicar actividad sin llenar la pantalla de banners.

Las notificaciones persistentes, en cambio, se gestionan con la API de notificaciones. Primero se comprueba que esté soportada, luego se pide permiso y finalmente se crea la notificación con el constructor Notification o desde el service worker con showNotification.

Desde la ventana de la PWA se pueden lanzar avisos así:

const notification = new Notification("Hola", {
  body: "Este es un mensaje de prueba",
  icon: "/assets/logo-192.png",
});

Desde el service worker, lo habitual es usar:

self.registration.showNotification("Hola desde el service worker!");

La ventaja de hacerlo en el service worker es que la PWA no tiene que estar abierta en primer plano: el propio worker, al recibir un evento push o cuando termina una tarea en segundo plano, puede mostrar la notificación de manera fiable en Windows, integrándose en el centro de actividades.

Buenas prácticas para desarrolladores de PWA que necesitan notificar bien en Windows

Si estás desarrollando una PWA que debe funcionar de forma seria en Windows (por ejemplo, llamadas VoIP, mensajería, pedidos, alarmas, etc.), conviene seguir varias buenas prácticas para minimizar sorpresas.

En el lado del servidor:

• Genera tus claves VAPID con herramientas fiables, usando algoritmos modernos.
• Guarda la clave privada en un almacén seguro (HSM, vault cifrado, etc.).
• Centraliza el envío con una librería estable de Web Push para tu lenguaje (Node, .NET, etc.).

En el lado del cliente:

• Pide permiso de notificaciones en un momento con sentido (por ejemplo, cuando el usuario confirma que quiere recibir avisos sobre un pedido, una reserva, etc.).
• Gestiona la suscripción con pushManager.subscribe, siempre con userVisibleOnly: true, ya que Edge no admite mensajes silenciosos.
• Implementa el evento push en el service worker y llama siempre a showNotification si recibes datos.
• Añade un manejador de notificationclick para llevar al usuario al lugar correcto dentro de la PWA.

Y en cuanto a la experiencia en Windows:

• Guía al usuario para que active el inicio automático de la PWA al arrancar el sistema, sobre todo si se trata de aplicaciones críticas como telefonía.
• Recomienda, si es posible, el uso de Microsoft Edge en Windows para mayor fiabilidad de procesos en segundo plano.
• Incluye instrucciones claras para revisar notificaciones en el sistema y desactivar Asistente de concentración si es necesario.

Al final, que una PWA muestre o no notificaciones en Windows depende tanto de la implementación técnica (service workers, Push API, claves VAPID, etc.) como de la configuración real del navegador y del sistema operativo: procesos en segundo plano, arranque automático, permisos y políticas de notificaciones. Cuando todas las piezas encajan, una PWA bien hecha puede comportarse de forma muy similar a una app de escritorio clásica y avisarte de llamadas, mensajes o cambios importantes sin que tengas que estar pendiente de la ventana todo el tiempo.