Ejemplo: un codebase como Telegram Mini App y como PWA

Una Mini App que solo abre dentro de Telegram es un producto con una puerta. Correcto para un salón cuyos clientes ya escriben en el bot. Incorrecto para un tracker, un gabinete de curso o un SaaS pequeño cuyo próximo user llega de una bio de Instagram. Subeasy - un tracker de suscripciones que es PWA y Mini App - es el modelo que tomaría para ese segundo caso.

La tarea en este ejemplo es una lista personal de suscripciones: Netflix, gym, Adobe, el dominio que olvidó. Lo interesante no es la lista. Es que las mismas pantallas funcionan en una hoja de Telegram y en un icono de inicio, sin mantener dos apps.

1. Dos puertas, un producto

Detecte el host. No una historia de marketing.

• Dentro de Telegram: hay `initData`. Validar HMAC en el servidor, sesión = Telegram user id. Tema desde `themeParams`. MainButton para «añadir» y «upgrade». El bot puede recordar «Adobe cobra en 3 días».
• En un navegador / PWA instalada: no hay `initData`. Magic link o passkey. La misma UI de lista. Botón CSS abajo en vez de MainButton. Notificaciones por Web Push donde funciona; una campana in-app en iOS.
• Local-first en ambos. IndexedDB o un store local pequeño guarda la lista. Sync a Postgres cuando hay sesión. El punto de Subeasy: las primeras cinco suscripciones se añaden antes de un muro de login.

2. Qué debe seguir compartido, qué hay que separar

Si separa pantallas, la Mini App irá tres semanas detrás de la PWA. Separe adaptadores. Mantenga las páginas.

• Compartido: modelo de dominio, UI de lista, charts, export, copy de precios. Una app Next.js. Un objeto `runtime`: `platform: "telegram" | "web"`.
• Separar: adaptador de auth, cromo (MainButton vs CSS), háptica, CloudStorage vs localStorage, pago. La vía Telegram puede abrir Stars. La web abre Stripe o Mono. La misma fila de entitlement en Postgres.
• Vincule cuentas después, no en el primer paint. Si el user empieza en la PWA y luego abre Telegram, ofrezca una vez «vincular este Telegram». No fuerce el email dentro de la Mini App en el minuto uno.

3. Monetización sin pintar dos checkouts

El premium es un flag en el user, no un SKU por plataforma. El muro es el mismo: temas, export, asientos familia, IA «está pagando 3× la mediana en streaming». Cómo entra el dinero cambia con la puerta.

• Puerta Telegram: Stars por un mes de premium. Sin recorte de Apple más allá de lo que Telegram ya toma. Bien para un equivalente de 4-12 €. El bot puede enviar el recibo.
• Puerta web: suscripción Stripe o Mono. El mismo webhook escribe `premium_until`. No invente un segundo nombre de plan.
• El nivel gratis sigue siendo útil. Subeasy no limita el tracker a propósito. Si la Mini App gratis es una demo, nadie instalará la PWA tampoco.

4. Cuándo no me metería con una PWA

Si el 90 % del trabajo ocurre en un grupo que ya existe, una segunda puerta es vanidad. El ejemplo de reparto no necesita PWA. Un menú de delivery para habituales que solo piden en Telegram tampoco.

• Puerta doble cuando extraños llegan de una URL: Instagram, un sitio, un email. La Mini App es para la cohorte que ya le escribe.
• No envuelva un admin de escritorio como PWA «porque podemos». La hoja sigue siendo phone-first. El admin sigue siendo un sitio normal.

Las mismas pantallas, dos hosts, un libro

Abriría con este modelo para un tracker, un gabinete de curso, un CRM pequeño para freelance o cualquier herramienta que deba sobrevivir a «vivo en Telegram» y a «no instalo un bot». Next.js, un switch `runtime`, lista local-first, Postgres al entrar, Stars dentro de Telegram y un checkout de tarjeta aburrido en la web. Si quiere esa puerta doble en vez de dos codebases - escriba por el formulario. Entregamos primero la vía Telegram si el dinero ya está ahí, y luego colgamos la PWA en las mismas rutas.