Esempio: un codebase come Telegram Mini App e come PWA

Una Mini App che si apre solo in Telegram è un prodotto con una porta. Giusto per un salone i cui clienti scrivono già nel bot. Sbagliato per un tracker, un cabinet di corsi o un piccolo SaaS il cui prossimo user arriva da una bio Instagram. Subeasy - un tracker di abbonamenti che è PWA e Mini App - è il modello che ruberei per quel secondo caso.

Il compito in questo esempio è una lista personale di abbonamenti: Netflix, palestra, Adobe, il dominio dimenticato. L’interessante non è la lista. È che gli stessi schermi funzionano in un foglio Telegram e su un’icona della home, senza due app da mantenere.

1. Due porte, un prodotto

Rilevate l’host. Non una storia di marketing.

• Dentro Telegram: c’è `initData`. Validare HMAC sul server, sessione = Telegram user id. Tema da `themeParams`. MainButton per «aggiungi» e «upgrade». Il bot può ricordare «Adobe addebita tra 3 giorni».
• Nel browser / PWA installata: niente `initData`. Magic link o passkey. La stessa UI elenco. Bottone CSS in basso al posto del MainButton. Notifiche via Web Push dove funziona; una campana in-app su iOS.
• Local-first in entrambi i casi. IndexedDB o un piccolo store locale tiene la lista. Sync su Postgres quando c’è una sessione. Il punto di Subeasy: i primi cinque abbonamenti si aggiungono prima di un muro di login.

2. Cosa resta condiviso, cosa va separato

Se separate gli schermi, la Mini App resterà tre settimane indietro rispetto alla PWA. Separate gli adapter. Tenete le pagine.

• Condiviso: modello di dominio, UI elenco, chart, export, copy prezzi. Un’app Next.js. Un oggetto `runtime`: `platform: "telegram" | "web"`.
• Separare: adapter di auth, chrome (MainButton vs CSS), haptic, CloudStorage vs localStorage, pagamento. Il percorso Telegram può aprire le Stars. Il web apre Stripe o Mono. La stessa riga di entitlement in Postgres.
• Collegate gli account dopo, non al primo paint. Se lo user parte dalla PWA e poi apre Telegram, offrite una volta «collega questo Telegram». Non forzate l’email nella Mini App al minuto uno.

3. Monetizzazione senza dipingere due checkout

Il premium è un flag sullo user, non uno SKU per piattaforma. Il muro è lo stesso: temi, export, posti famiglia, IA «stai pagando 3× la mediana per lo streaming». Come entra il denaro cambia con la porta.

• Porta Telegram: Stars per un mese di premium. Niente taglio Apple oltre a quello che Telegram prende già. Bene per un equivalente 4-12 €. Il bot può mandare la ricevuta.
• Porta web: abbonamento Stripe o Mono. Lo stesso webhook scrive `premium_until`. Non inventate un secondo nome di piano.
• Il piano free resta utile. Subeasy non limita il tracker apposta. Se la Mini App gratis è una demo, nessuno installerà nemmeno la PWA.

4. Quando non mi impegnerei con una PWA

Se il 90 % del lavoro succede in un gruppo che c’è già, una seconda porta è vanità. L’esempio di ripartizione non serve una PWA. Un menu delivery per i clienti fissi che ordinano solo in Telegram nemmeno.

• Doppia porta quando gli sconosciuti arrivano da un URL: Instagram, un sito, un’email. La Mini App è per la coorte che vi scrive già.
• Non avvolgete un admin desktop come PWA «perché possiamo». Il foglio resta phone-first. L’admin resta un sito normale.

Gli stessi schermi, due host, un ledger

Aprirei con questo modello per un tracker, un cabinet corsi, un piccolo CRM freelance o qualsiasi tool che deve sopravvivere sia a «vivo in Telegram» sia a «non installo un bot». Next.js, uno switch `runtime`, lista local-first, Postgres al login, Stars dentro Telegram e un checkout carta noioso sul web. Se volete quella doppia porta invece di due codebase - scrivete dal form. Consegniamo prima il percorso Telegram se i soldi stanno già lì, poi appendiamo la PWA alle stesse route.