Przykład: jedna baza kodu jako miniaplikacja Telegram i PWA
Niektórzy klienci mieszkają w Telegram. Niektórzy nigdy nie otworzą bota. Podwójne drzwi w stylu Subeasy: interfejs użytkownika zorientowany lokalnie, Telegram initData na jednej ścieżce, normalna sesja na drugiej, gwiazdki, gdy jesteś w komunikatorze. Jak mógłbym to wysłać bez rozwidlania produktu.
Miniaplikacja, którą można otworzyć tylko w Telegramie, to produkt z jednymi drzwiami. Tak jest w przypadku salonu, którego klienci już piszą w bocie. Jest to niewłaściwe w przypadku modułu śledzącego, gabinetu kursów lub małej SaaS, której następny użytkownik przychodzi z biografii na Instagramie. Subeasy – narzędzie do śledzenia subskrypcji będące zarówno PWA, jak i miniaplikacją – to wzór, który ukradłbym w drugim przypadku.
Zadaniem w tym przykładzie jest osobista lista subskrypcji: Netflix, siłownia, Adobe, domena, o której zapomniałeś. Interesującą częścią nie jest lista. Polega to na tym, że te same ekrany działają w arkuszu Telegram i na ikonie ekranu głównego, bez konieczności utrzymywania dwóch aplikacji.
1. Dwoje drzwi, jeden produkt
Wykryj hosta. Nie wykrywaj historii marketingowej.
- Wewnątrz Telegram: obecny jest `initData`. Sprawdź poprawność HMAC na serwerze, sesja = Telegram identyfikator użytkownika. Motyw z `themeParams`. MainButton dla „dodaj” i „uaktualnij”. Bot może przypomnieć „Adobe ładuje się w 3 dni”.
- W przeglądarce / zainstalowanym PWA: brak `initData`. Magiczny link lub hasło. Ten sam interfejs listy. Dolny przycisk CSS zamiast MainButton. Powiadomienia poprzez Web Push tam, gdzie to działa; dzwonek w aplikacji na iOS.
- Tak czy inaczej, najpierw lokalnie. Listę przechowuje IndexedDB lub mały lokalny sklep. Synchronizuj z Postgres, gdy istnieje sesja. Punkt Subeasy: pierwszych pięć subskrypcji zostaje dodanych, zanim ktokolwiek napotka ścianę logowania.
2. Co musi pozostać wspólne, co musi się rozwidlić
Jeśli rozwidlisz ekrany, wyślesz Mini aplikację, która będzie opóźniona w stosunku do PWA o trzy tygodnie. Adaptery wideł. Zachowaj strony.
- Udostępnione: model domeny, interfejs listy, wykresy, eksport, kopia cen. Jedna Next.js aplikacja. Obiekt `runtime`: `platforma: „telegram” | „sieć”`.
- Widelec: adapter uwierzytelniania, chrome (MainButton vs CSS), haptics, CloudStorage vs localStorage, zapłać. Telegram ścieżka może otworzyć Gwiazdy. Otwiera się ścieżka internetowa Stripe lub Mono. Ten sam wiersz uprawnień w Postgres.
- Powiąż konta później, a nie przy pierwszym malowaniu. Jeśli użytkownik zaczyna w PWA, a następnie otwiera Telegram, zaproponuj raz „połącz to Telegram”. Nie wymuszaj wysyłania wiadomości e-mail do aplikacji Mini już w pierwszej minucie.
3. Zarabianie bez malowania dwóch kas
Premium to flaga użytkownika, a nie jednostka SKU na platformę. Ściana jest taka sama: motywy, eksport, miejsca rodzinne, sztuczna inteligencja „za streaming płacisz 3× medianę”. Sposób, w jaki pieniądze wpływają, zmienia się wraz z drzwiami.
- Drzwi Telegram: Gwiazdki za miesiąc premium. Żadne Apple nie przekroczyło tego, co już zajmuje Telegram. Dobry za równowartość 4-12 €. Bot może wysłać potwierdzenie.
- Drzwi internetowe: Stripe lub subskrypcja Mono. Ten sam webhook zapisuje „premium_until”. Nie wymyślaj nazwy drugiego planu.
- Poziom bezpłatny pozostaje przydatny. Subeasy celowo utrzymuje nieograniczoną liczbę trackerów. Jeśli bezpłatna Mini aplikacja jest wersją demonstracyjną, ludzie również nie zainstalują PWA.
4. Kiedy nie zawracałbym sobie głowy PWA
Jeśli 90% pracy odbywa się w grupie, która już istnieje, drugie drzwi to próżność. Przykład podziału wydatków nie wymaga PWA. Menu z dostawą jedzenia dla stałych bywalców, którzy zamawiają tylko w Telegram, również tego nie zapewnia.
- Zbuduj podwójne drzwi, gdy nieznajomi przyjdą z adresu URL: Instagram, strona internetowa, e-mail. Mini aplikacja jest przeznaczona dla grupy, która już z Tobą rozmawia.
- Nie pakuj administratora pulpitu jako PWA „ponieważ możemy”. Arkusz nadal dotyczy telefonu. Administrator pozostaje normalną witryną.
Te same ekrany, dwa hosty, jedna księga
Zacząłbym od tego wzoru dla trackera, szafki na kursy, małej CRM dla freelancerów lub dowolnego narzędzia, które musi przetrwać zarówno „Żyję w Telegram”, jak i „Nie będę instalować bota”. Next.js, przełącznik „runtime”, lista-pierwsza lokalnie, Postgres przy logowaniu, gwiazdki w Telegram i nudna kasa fiskalna w sieci. Jeśli chcesz mieć podwójne drzwi zamiast dwóch baz kodowych - napisz przez formularz. Najpierw wyślemy ścieżkę Telegram, jeśli tam już leżą pieniądze, a następnie zawiesimy PWA na tych samych trasach.
Potrzebujesz tego zbudować, a nie tylko wyjaśnić?
Telegram Rozwój aplikacji Mini: Next.js, płatności, boty. Bezpośredni wykonawca.
Chcesz omówić swój projekt?
Jestem starszym inżynierem stron internetowych specjalizującym się w React i Next.js - dostępnym dla niezależnych projektów na całym świecie.
Lokalizacja
Kijów, Ukraina
Upwork
Zobacz profilTelegram
Skontaktuj się ze mnąVibera
Skontaktuj się ze mną