Beispiel: eine Codebasis als Telegram Mini App und als PWA

Eine Mini App, die nur in Telegram öffnet, ist ein Produkt mit einer Tür. Das stimmt für einen Salon, dessen Kunden schon im Bot schreiben. Das stimmt nicht für einen Tracker, ein Kurs-Kabinett oder ein kleines SaaS, dessen nächster User aus einer Instagram-Bio kommt. Subeasy - ein Abo-Tracker, der PWA und Mini App ist - ist das Muster, das ich für den zweiten Fall übernehmen würde.

Die Aufgabe in diesem Beispiel ist eine persönliche Abo-Liste: Netflix, Gym, Adobe, die Domain, die Sie vergessen haben. Das Interessante ist nicht die Liste. Das Interessante ist, dass dieselben Screens in einem Telegram-Sheet und auf einem Home-Screen-Icon laufen, ohne zwei Apps zu pflegen.

1. Zwei Türen, ein Produkt

Den Host erkennen. Keine Marketing-Story erkennen.

• In Telegram: `initData` ist da. HMAC auf dem Server prüfen, Session = Telegram-User-Id. Theme aus `themeParams`. MainButton für «hinzufügen» und «upgrade». Der Bot kann erinnern «Adobe zieht in 3 Tagen ein».
• Im Browser / installierter PWA: kein `initData`. Magic Link oder Passkey. Dieselbe Listen-UI. CSS-Button unten statt MainButton. Notifications per Web Push, wo es geht; in der App eine Glocke auf iOS.
• Local-first auf beiden Wegen. IndexedDB oder ein kleiner lokaler Store hält die Liste. Sync nach Postgres, wenn eine Session da ist. Subeasys Punkt: die ersten fünf Abos sind drin, bevor jemand eine Login-Wand sieht.

2. Was geteilt bleiben muss, was sich trennen muss

Wenn Sie Screens aufspalten, hinkt die Mini App der PWA drei Wochen hinterher. Trennen Sie Adapter. Seiten bleiben geteilt.

• Geteilt: Domänenmodell, Listen-UI, Charts, Export, Preis-Copy. Eine Next.js-App. Ein `runtime`-Objekt: `platform: "telegram" | "web"`.
• Trennen: Auth-Adapter, Chrome (MainButton vs. CSS), Haptics, CloudStorage vs. localStorage, Zahlung. Telegram kann Stars öffnen. Web öffnet Stripe oder Mono. Dieselbe Entitlement-Zeile in Postgres.
• Konten später binden, nicht beim ersten Paint. Wer in der PWA startet und dann Telegram öffnet, bekommt einmal «dieses Telegram verknüpfen». Keine E-Mail in der Mini App in Minute eins erzwingen.

3. Monetarisierung ohne zwei Checkouts zu malen

Premium ist ein Flag am User, kein SKU pro Plattform. Die Wand ist dieselbe: Themes, Export, Family-Seats, KI «Sie zahlen 3× den Median für Streaming». Wie Geld reinkommt, ändert sich mit der Tür.

• Telegram-Tür: Stars für einen Monat Premium. Kein Apple-Schnitt über das hinaus, was Telegram schon nimmt. Gut für 4-12 € Äquivalent. Der Bot kann die Quittung senden.
• Web-Tür: Stripe- oder Mono-Abo. Derselbe Webhook schreibt `premium_until`. Keinen zweiten Plannamen erfinden.
• Die Free-Stufe bleibt nützlich. Subeasy limitiert den Tracker absichtlich nicht. Wenn die kostenlose Mini App eine Demo ist, installiert auch niemand die PWA.

4. Wann ich mich nicht mit einer PWA abgeben würde

Wenn 90 % der Arbeit in einer Gruppe passiert, die schon da ist, ist eine zweite Tür Eitelkeit. Das Kostenteilungs-Beispiel braucht keine PWA. Ein Liefermenü für Stammgäste, die nur in Telegram bestellen, auch nicht.

• Doppelte Tür, wenn Fremde über eine URL kommen: Instagram, Website, E-Mail. Die Mini App ist für die Kohorte, die schon mit Ihnen schreibt.
• Packen Sie kein Desktop-Admin als PWA ein, «weil wir können». Das Sheet bleibt Phone-First. Admin bleibt eine normale Website.

Dieselben Screens, zwei Hosts, ein Ledger

Ich würde mit diesem Muster für einen Tracker, ein Kurs-Kabinett, ein kleines CRM für Freelancer oder jedes Tool öffnen, das sowohl «ich lebe in Telegram» als auch «ich installiere keinen Bot» überleben muss. Next.js, ein `runtime`-Switch, Liste local-first, Postgres beim Login, Stars in Telegram und ein langweiliger Karten-Checkout im Web. Wenn Sie diese doppelte Tür statt zweier Codebasen wollen - schreiben Sie über das Formular. Wir bringen den Telegram-Pfad zuerst in Produktion, wenn das Geld schon dort sitzt, und hängen die PWA danach an dieselben Routen.