Was eine Telegram Mini App wirklich ist - und wann ich eine bauen würde

Eine Telegram Mini App ist kein Bot mit hübscheren Buttons. Es ist eine echte Web-App - HTML, CSS, JavaScript -, die Telegram in einem Panel im Chat öffnet. Der Nutzer verlässt den Messenger nicht, geht nicht in den App Store und tippt oft kein Passwort. Das ist das Produkt: eine Aufgabe dort erledigt, wo das Gespräch schon läuft.

Manche sagen noch „Telegram Web App“ - der alte Name. Dasselbe: eine HTTPS-Seite plus WebApp SDK plus ein Bot, der sie öffnet. Wer eine Marketing-Site in diese Webview klebt, hat keine Mini App. Er hat eine gequetschte Website mit Telegram-Header. Dieser Artikel ist, wie ich die Fläche wirklich behandeln würde.

1. Mini App, Bot, Website und Store-App

Diese vier Flächen lösen verschiedene Aufgaben. Wer sie vermischt, bekommt einen Bot, der Shop spielen will, oder eine Mini App, die bei Google gefunden werden will.

• Bot: Chat-UI. Gut für Befehle, Hinweise, einmalige Zahlung, „schick mir dieses PDF.“ Schlecht für Kataloge, Kalender und mehrstufige Formulare.
• Website: öffentliche URL, SEO, teilbare Links, Desktop. Die Haustür für Leute, die noch nicht in Ihrem Telegram sind.
• Store-App: Installation, Push, Offline, Store-Steuer. Richtig, wenn Sie OS-Rechte brauchen. Falsch, wenn die Aufgabe „einen Termin in 40 Sekunden buchen“ ist.
• Mini App: volle Oberfläche in Telegram, Identität aus dem Chat, Zahlung über Stars oder Rechnungen, Updates ohne Store-Prüfung. Das Produkt lebt dort, wo der Kunde schon mit Ihnen schreibt.

2. Wie es wirklich aufgebaut ist

Drei Teile, nicht eins. Fehlt eines, haben Sie eine Demo, kein Produkt.

• Ein Bot. Er hält den Menü-Button, KeyboardButton web_app, den Inline-Button oder den Direktlink (t.me/bot/app). Ohne Bot öffnet niemand das Panel.
• Eine HTTPS-Web-App. Telegram lädt Ihre URL in einer Webview. Next.js auf Vercel (oder jeder HTTPS-Host) reicht. HTTP und Localhost-Tricks gehören nur in die Entwicklung.
• Das WebApp SDK (`window.Telegram.WebApp`). Theme, Viewport, MainButton, BackButton, Haptic, CloudStorage, Rechnung, Nutzerobjekt. Ohne es raten Sie CSS im Dunkeln.

3. Identität: initData ist kein Anmeldebildschirm

Wenn Telegram Ihre Seite öffnet, hängt es signierte `initData` an: Nutzer-Id, Name, Sprache, optionales Query, Hash. Das ist die Sitzung. Der Nutzer hat schon bewiesen, dass das Konto ihm gehört - er ist in der App. Schrauben Sie kein „Login mit E-Mail“ drauf, außer Sie müssen ein bestehendes Kundenkonto binden.

Vertrauen Sie `initData` nie im Browser. Jeder öffnet DevTools und fälscht ein Nutzerobjekt. Der Server muss den Hash per HMAC mit dem Bot-Token prüfen, `auth_date` frisch halten, dann Ihr eigenes Session-Cookie oder JWT ausstellen. Ohne diesen Schritt haben Sie keine Authentifizierung. Sie haben ein Kostüm.

4. UX, die sich nicht wie eine Website in einer Schublade anfühlt

Telegram hat schon eine eigene Leiste: Griff, Safe Areas, Theme hell/dunkel. Dagegen kämpfen, und die App fühlt sich fremd an. Nutzen, und sie fühlt sich nativ an.

• MainButton ist die primäre Aktion - zahlen, buchen, senden. Ein CSS-Button unten sitzt unter dem Home-Indikator und wirkt wie ein Klon.
• BackButton für verschachtelte Screens. Der Telegram-Swipe nach unten schließt die Mini App - klauen Sie die Geste nicht für „vorheriger Schritt.“
• Lesen Sie `themeParams` und `colorScheme`. Hartes Weiß in dunklem Telegram wirkt wie ein Bug.
• Viewport ist nicht `100vh`. Nutzen Sie `viewportStableHeight` und expand, wenn Sie das volle Panel brauchen. Testen Sie iOS und Android - sie sind sich uneins.

5. Wann ich wirklich eine Mini App live nehmen würde

Ich würde eine bauen, wenn der Kunde schon in Telegram ist - oder sein wird, weil so dieses Business spricht - und die Aufgabe eine echte Oberfläche braucht, keine Nachrichten-Kette.

• Buchung mit Kalender, nicht „antworte mit einem Datum.“ Shops mit Filtern. Kurskonten. Rechner, die zur Anfrage werden. Treuekarten. Interne Tools für ein Team, das schon in einer Gruppe lebt.
• Zahlung, die den Chat nicht verlassen soll: Telegram Stars, Rechnungen, oder Ihr bestehender Checkout - aus der Mini App geöffnet, im Bot bestätigt.

6. Wann ich ablehnen würde

Eine Mini App ersetzt keine Website. Sie erscheint nicht in der Suche. Sie ist eine schlechte einzige Tür, wenn die Hälfte der Käufer über Google kommt. Sie ist auch ein schlechter Ort, um ein Desktop-CRM abzuladen.

• SEO, Blog, öffentlicher Katalog, „Über uns“, Stellenanzeigen - das ist eine Website. Verlinken Sie von dort auf die Mini App, wenn die Aufgabe im Chat weitergeht.
• Schwere Grafik, riesige Tabellen, Admin mit vielen Fenstern. Das Panel ist Phone-First. Bauen Sie das echte Admin im Web.
• Wenn die einzige Anforderung „Mini Apps sind im Trend“ ist und es keine Telegram-Audience gibt - starten Sie mit einer Site und einem Bot, der eine Aufgabe macht.

7. Der Stack, mit dem ich 2026 öffnen würde

Dieselbe Disziplin wie beim MVP: eine Codebasis, die später auch die Website sein kann, eine langweilige Datenbank, ein Bot, der nur die Tür öffnet und Zahlungen bestätigt.

• Next.js + TypeScript + Tailwind für die Oberfläche. Eine App: Mini-App-Routen und, falls nötig, die öffentliche Marketing-Site.
• PostgreSQL als maßgebliche Datenquelle. Nutzer mit Telegram-Id als Schlüssel. Redis, wenn Sie Rate Limits oder kurzlebige Entwürfe brauchen.
• Ein kleiner Bot (grammY oder Telegraf) für Menu Button, Rechnungen und Nachrichten nach der Zahlung. Packen Sie die Fachlogik nicht nur in den Bot, wenn die Mini App sie auch braucht - ein gemeinsames Modul.
• Validieren Sie initData auf dem Server bei jeder privilegierten Anfrage. Speichern Sie nichts Geheimes in der Webview.

Die Mini App ist eine Tür, keine Marke

Behandeln Sie sie als Produktfläche mit Vertrag: schnell öffnen, wie Telegram aussehen, den Nutzer auf dem Server beweisen, eine Aufgabe beenden, die Quittung zurück in den Chat. Wenn Sie Reichweite, SEO und eine Story für Fremde brauchen - das ist weiter eine Website. Wenn Sie ein Gespräch plus echte Oberfläche brauchen - das ist eine Mini App. Die zweite würde ich live nehmen, wenn die Audience schon im Messenger ist. Nicht, weil der alte Name „Web App“ billiger klang als ein App-Store-Build.