Příklad: Jedna Codebase jako Telegram Mini App a PWA
Někteří zákazníci bydlí v Telegram. Někteří robota nikdy neotevřou. Dvojité dveře ve stylu Subeasy: místní uživatelské rozhraní, Telegram initData na jedné cestě, normální relace na druhé, hvězdičky, když jste uvnitř messengeru. Jak bych to poslal bez rozvětvení produktu.
Mini aplikace, která se může otevřít pouze uvnitř Telegram, je produkt s jedněmi dveřmi. To je správné pro salon, jehož klienti již píší do bota. Je to špatné pro sledovač, kabinet kurzů nebo malý SaaS, jehož další uživatel přichází z instagramového bio. Subeasy – sledovač předplatného, který je PWA i Mini App – je vzor, který bych pro tento druhý případ ukradl.
Úloha v tomto příkladu je osobní seznam předplatitelů: Netflix, tělocvična, Adobe, doména, na kterou jste zapomněli. Zajímavá část není seznam. Jde o to, že stejné obrazovky fungují na listu Telegram a na ikoně domovské obrazovky, aniž by museli udržovat dvě aplikace.
1. Dvoje dveře, jeden produkt
Zjistit hostitele. Neodhalujte marketingový příběh.
- Uvnitř Telegram: `initData` je přítomen. Ověřte HMAC na serveru, session = Telegram ID uživatele. Téma z `themeParams`. MainButton pro „přidat“ a „upgradovat“. Robot může připomínat „Adobe nabije za 3 dny“.
- V prohlížeči / nainstalovaném PWA: žádné `initData`. Magický odkaz nebo klíč. Stejné uživatelské rozhraní seznamu. Spodní tlačítko CSS namísto MainButton. Oznámení prostřednictvím Web Push, kde to funguje; zvonek v aplikaci na iOS.
- Místní - první v obou směrech. Seznam drží IndexedDB nebo malý místní obchod. Synchronizujte s Postgres, když existuje relace. Pointa Subeasy: prvních pět předplatných se přidá dříve, než se někdo setká s přihlašovací zdí.
2. Co musí zůstat sdílené, co se musí rozdělit
Pokud rozložíte obrazovky, odešlete Mini aplikaci, která zpozdí PWA o tři týdny. Vidlicové adaptéry. Udržujte stránky.
- Sdílené: model domény, uživatelské rozhraní seznamu, grafy, export, kopie cen. Jedna aplikace Next.js. Objekt `runtime`: `platforma: "telegram" | "web"".
- Vidlice: auth adaptér, chrome (MainButton vs CSS), haptika, CloudStorage vs localStorage, platba. Telegram cesta může otevřít hvězdy. Otevře se webová cesta Stripe nebo Mono. Stejný řádek nároků v Postgresu.
- Svažte účty později, ne na první nátěr. Pokud uživatel začne v PWA a poté otevře Telegram, nabídněte jednou „propojit toto Telegram“. Nevynucujte si e-mail v aplikaci Mini v první minutě.
3. Zpeněžení bez malování dvou pokladen
Premium je příznak na uživateli, nikoli SKU na platformě. Zeď je stejná: témata, export, rodinná sedadla, AI „za streamování platíte 3× medián.“ Jak peníze vstupují, se mění s dveřmi.
- Telegram dveře: Hvězdičky za měsíc prémie. Žádný Apple nepřekračuje to, co již zabírá Telegram. Dobré za ekvivalent 4-12 €. Robot může poslat účtenku.
- Web door: Stripe nebo Mono předplatné. Stejný webhook píše `premium_until`. Nevymýšlejte název druhého plánu.
- Bezplatná úroveň zůstává užitečná. Subeasy záměrně udržuje tracker neomezený. Pokud je bezplatná aplikace Mini App demo, lidé si nebudou instalovat ani PWA.
4. Když bych se neobtěžoval s PWA
Pokud se 90 % práce odehrává ve skupině, která již existuje, jsou druhé dveře marnost. Příklad rozdělení nákladů nepotřebuje PWA. Nabídka rozvozu jídel pro štamgasty, kteří si objednávají pouze v Telegram, také ne.
- Vybudujte dvojité dveře, když cizí lidé přijdou z adresy URL: Instagram, webové stránky, e-mail. Mini aplikace je určena pro kohortu, která s vámi již chatuje.
- Nezabalujte správce počítače do PWA „protože můžeme“. List je stále na prvním místě. Admin zůstává normální web.
Stejné obrazovky, dva hostitelé, jedna účetní kniha
Otevřel bych tento vzor pro tracker, kabinet kurzů, malý CRM pro freelancery nebo jakýkoli nástroj, který musí přežít jak „žiju v Telegram“, tak „nebudu instalovat bota“. Next.js, přepínač `runtime`, místní první seznam, Postgres, když se přihlásí, Hvězdičky uvnitř Telegram a nudná pokladna na webu. Pokud chcete ty dvojité dveře místo dvou kódových základen - napište přes formulář. Nejprve odešleme cestu Telegram, pokud tam již peníze leží, a poté zavěsíme PWA na stejné trasy.
Potřebujete to postavit, ne jen vysvětlit?
Telegram Vývoj mini aplikací: Next.js, platby, roboti. Přímý dodavatel.
Jste připraveni diskutovat o svém projektu?
Jsem senior webový inženýr se specializací na React a Next.js – dostupné pro projekty na volné noze po celém světě.
Umístění
Kyjev, Ukrajina
Upwork
Zobrazit profilTelegram
Kontaktujte měViber
Kontaktujte mě