PWA con notificaciones push sin App Store: cómo lo tenemos en producción

Esta semana vi una clase sobre cómo instalar una web en el celular sin pasar por el App Store. Muy buena. Y mientras la veía caí en cuenta de algo: eso mismo lo tenemos funcionando hace rato en Wa Suite, nuestro CRM de WhatsApp, con las notificaciones llegando al teléfono. Solo que nunca lo contamos.

Entonces hoy lo cuento. No la teoría: las piezas reales, cuántas líneas tiene cada una, y las trampas que nos hicieron perder tiempo.

¿Qué es una PWA y por qué no necesita App Store?

Una PWA es una página web que el celular deja instalar como si fuera una app: queda con su ícono en la pantalla de inicio, abre sin la barra del navegador y puede enviar notificaciones. No pasa por ninguna tienda porque se instala directo desde el navegador.

Para una herramienta que usa un equipo todos los días, como un CRM, la columna de la derecha gana casi siempre.

¿Qué piezas tiene la nuestra?

Tiene cuatro, y son pequeñas. Wa Suite son dos programas que comparten una base de datos: el agente, que está conectado a WhatsApp, y el CRM, que es lo que ve la persona.

1. El manifest. Un archivo de 17 líneas que le dice al teléfono cómo se llama la app, de qué color es y qué íconos usar. Tres íconos: 192, 512 y uno de 512 "maskable", que es el que Android recorta en círculo o en cuadrado según el teléfono. Abre directo en la bandeja de chats, no en una portada.
2. El service worker. 58 líneas. Es el pedazo de código que el navegador deja corriendo aunque la app esté cerrada, y es el que recibe el aviso.
3. Las claves VAPID. Un par de claves que identifican a nuestro servidor ante Apple, Google y Mozilla. Sin ellas nadie entrega el aviso.
4. El envío. 99 líneas en el agente, con la librería web-push. El agente es el que sabe que entró un mensaje, entonces es el que avisa.

Cuando alguien toca "Activar notificaciones", el navegador negocia una suscripción con su propio servicio y nosotros solo guardamos el resultado en una tabla. Una fila por dispositivo.

¿Por qué nuestro service worker no guarda nada en caché?

Porque una bandeja de chats vieja es peor que no tener app. Casi todos los tutoriales de PWA empiezan por el modo sin conexión, y para una carta de restaurante o un catálogo tiene sentido. Para un CRM, no.

Si el teléfono muestra la conversación de hace una hora y la persona cree que es la de ahora, le contesta al cliente algo que ya no aplica. Preferimos que sin red no cargue. Nuestro service worker hace dos cosas y ninguna más: recibir el aviso y abrir la app en el chat correcto cuando lo tocan.

Esta es la decisión que más recomiendo pensar antes de copiar una plantilla: ¿tus datos aguantan estar desactualizados? Si la respuesta es no, no los guardes.

¿Cuándo avisa y cuándo se queda callada?

Avisa solo cuando hay algo que una persona tiene que hacer. Son dos casos:

• Entra un mensaje en un chat que está atendiendo una persona.
• La IA escala un chat a humano, y el aviso dice el motivo.

No avisa de lo que el bot ya contestó, ni de los grupos. Si el teléfono vibra por cada mensaje que la IA resolvió sola, a los dos días el operador silencia la app, y ahí perdiste el único aviso que importaba.

Dos detalles más que se notan en el uso:

• Los avisos se agrupan por chat. Diez mensajes del mismo cliente son un aviso que se actualiza, no diez apilados.
• Tocar el aviso reutiliza la app abierta. Si ya la tienes abierta, te lleva al chat ahí mismo en vez de abrir otra ventana.

¿Qué trampas nos encontramos?

Cuatro, y ninguna da un error claro. Todas fallan en silencio.

1. En iPhone, sin instalar no hay avisos. Safari solo entrega notificaciones si la web está añadida a la pantalla de inicio. Si alguien abre el CRM en una pestaña y activa los avisos, no le va a llegar nada. Lo resolvimos en la interfaz: cuando detecta un iPhone que no la tiene instalada, muestra un recuadro con el paso que falta.

2. El service worker tiene que quedar fuera del login. Nuestro CRM pide sesión para todo. El navegador registra el service worker y lee el manifest por fuera de la sesión, así que le llegaba una redirección al login en vez del archivo. No sale ningún error: simplemente las notificaciones nunca se activan. Hay que dejar públicos el manifest, el service worker y los íconos.

3. Las suscripciones se mueren y hay que limpiarlas. Cuando alguien desinstala la app o revoca el permiso, esa suscripción empieza a responder 404 o 410. Si no la borras, sigues intentando enviarle para siempre. El agente las elimina solo cuando ve esa respuesta.

4. Un aviso que falla no puede tumbar el mensaje. El envío está escrito para no lanzar errores nunca. Si el servicio de Apple está caído, el mensaje del cliente igual tiene que guardarse y aparecer en la bandeja. El aviso es un extra; el mensaje es el negocio.

Y una que no es trampa pero conviene saber: el permiso es por dispositivo. Si la persona le da "No permitir" la primera vez, desde la app ya no se le puede volver a preguntar; tiene que cambiarlo en los ajustes del teléfono.

¿Cuándo sí conviene ir a la tienda?

Conviene cuando necesitas algo que la web no puede hacer en un iPhone, o cuando estar en la tienda es parte de la confianza.

• Necesitas Bluetooth, NFC, datos de Salud o Wallet.
• Tu cliente final va a buscar la app en el App Store, y que no esté le genera duda.
• Vas a cobrar suscripciones dentro de la app y prefieres que el cobro lo maneje la tienda.

Para todo lo demás, yo empezaría por la PWA. La pruebas con usuarios reales en días, y si después hace falta la tienda, ya sabes qué funciones usa la gente de verdad.

¿Para quién vale la pena?

Vale la pena si ya tienes una web que tu equipo o tus clientes abren todos los días desde el celular. Ahí la diferencia se siente desde el primer día: un ícono en la pantalla y un aviso cuando hay algo que hacer, en vez de acordarse de abrir una pestaña.

Lo que me deja esta semana es otra cosa: llevábamos semanas con esto en producción y no se lo habíamos contado a nadie. Lo que uno construye y no muestra, para el resto no existe. Así que aquí está.

Si tienes un sistema web y quieres que tu equipo lo lleve en el celular con avisos, hablemos. Reviso qué tienes y te digo si con una PWA alcanza o si de verdad necesitas tienda.

Agenda una consulta gratuita

Yoany Andrés My Store Digital