Exemplu: O bază de cod ca o miniaplicație Telegram și o PWA

O aplicație Mini care se poate deschide numai în interiorul Telegram este un produs cu o singură ușă. Este corect pentru un salon ai cărui clienți deja scriu în bot. Este greșit pentru un tracker, un cabinet de curs sau un mic SaaS al cărui utilizator următor vine dintr-o biografie Instagram. Subeasy - un tracker de abonament care este atât PWA, cât și Mini App - este modelul pe care l-aș fura pentru al doilea caz.

Lucrarea din acest exemplu este o listă personală de abonament: Netflix, sală de sport, Adobe, domeniul pe care l-ați uitat. Partea interesantă nu este lista. Este că aceleași ecrane funcționează într-o foaie Telegram și pe o pictogramă pe ecranul de pornire, fără a menține două aplicații.

1. Cele două uși, un singur produs

Detectează gazda. Nu detectați o poveste de marketing.

• În interiorul Telegram: `initData` este prezent. Validați HMAC pe server, sesiune = Telegram id de utilizator. Tema din `themeParams`. Buton principal pentru „adăugați” și „actualizați”. Botul poate reaminti „Adobe se încarcă în 3 zile”.
• Într-un browser / PWA instalat: nu `initData`. Link magic sau cheie de acces. Aceeași listă UI. Buton CSS de jos în loc de MainButton. Notificări prin Web Push unde funcționează; un clopoțel în aplicație pe iOS.
• Local-în primul rând oricum. IndexedDB sau un mic magazin local deține lista. Sincronizați cu Postgres când există o sesiune. Ideea Subeasy: primele cinci abonamente sunt adăugate înainte ca cineva să întâlnească un perete de conectare.

2. Ce trebuie să rămână împărtășit, ce trebuie să se bifurcă

Dacă bifurcați ecranele, veți livra o Mini Aplicație care întârzie PWA cu trei săptămâni. Adaptoare furci. Păstrați paginile.

• Partajat: model de domeniu, listă UI, diagrame, export, copie de preț. O aplicație Next.js. Un obiect `runtime`: `platformă: "telegram" | „web”`.
• Furcă: adaptor de autentificare, crom (MainButton vs CSS), haptics, CloudStorage vs localStorage, plată. Calea Telegram poate deschide Stele. Calea web deschide Stripe sau Mono. Același rând de drepturi în Postgres.
• Legați conturile mai târziu, nu la prima vopsea. Dacă un utilizator începe în PWA apoi deschide Telegram, oferiți „link this Telegram” o dată. Nu forțați e-mailul în interiorul aplicației Mini în minutul unu.

3. Monetizare fără a picta două casete

Premium este un steag pentru utilizator, nu un SKU pe platformă. Peretele este același: teme, export, locuri de familie, AI „plătiți de trei ori mediana pentru streaming”. Modul în care intră banii se schimbă odată cu ușa.

• Telegram ușă: Stele pentru o lună de premium. Nici un Apple nu a tăiat dincolo de ceea ce ia deja Telegram. Bun pentru 4-12 € echivalent. Botul poate trimite chitanța.
• Ușă web: abonament Stripe sau Mono. Același webhook scrie `premium_until`. Nu inventați un al doilea nume de plan.
• Nivelul gratuit rămâne util. Subeasy păstrează tracker-ul nelimitat intenționat. Dacă Mini App gratuită este o demonstrație, oamenii nu vor instala nici PWA.

4. Când nu m-aș deranja cu un PWA

Dacă 90% din muncă are loc într-un grup care există deja, o a doua ușă este vanitatea. Exemplul de împărțire a cheltuielilor nu are nevoie de un PWA. Nici un meniu cu livrare de mâncare pentru obișnuiții care comandă doar în Telegram nu este.

• Construiește o ușă dublă când sosesc străini de la o adresă URL: Instagram, un site web, un e-mail. Mini-aplicația este pentru cohorta care discută deja cu tine.
• Nu includeți un administrator de desktop ca PWA „pentru că putem”. Foaia este încă primul telefon. Administratorul rămâne un site web normal.

Aceleași ecrane, două gazde, un registru

Aș deschide cu acest model pentru un tracker, un cabinet de cursuri, un mic CRM pentru liber profesioniști sau orice instrument care trebuie să supraviețuiască atât „Trăiesc în Telegram”, cât și „Nu voi instala un bot”. Next.js, un comutator `runtime`, listă pe primul loc, Postgres când se conectează, Stele în interiorul Telegram și un card plictisitor de plată pe web. Dacă doriți acea ușă dublă în loc de două baze de cod - scrieți prin formular. Vom expedia mai întâi calea Telegram dacă acolo sunt deja banii, apoi agățăm PWA pe aceleași rute.