Разработка сайта под Telegram Web App: витрина, которая живёт внутри мессенджера
Telegram в Узбекистане — не дополнительный канал, а основной. Web App позволяет открыть полноценную витрину прямо в чате, без установки приложения.
Что такое TWA технически
Telegram Web App — это ваша веб-страница, открытая во встроенном браузере мессенджера, которой доступен объект window.Telegram.WebApp. Через него страница получает данные пользователя, тему оформления, управляет главной кнопкой и закрывает себя.
Запускается TWA из кнопки в меню бота, из inline-кнопки под сообщением или из кнопки клавиатуры. Со стороны разработки это обычный фронтенд на React или Next.js, задеплоенный по HTTPS.
Ключевое отличие от сайта — контекст. Пользователь уже авторизован, у вас есть его идентификатор и имя, и не нужны ни регистрация, ни ввод телефона на первом шаге.
Авторизация и проверка initData
Telegram передаёт в приложение строку initData с параметрами пользователя и полем hash. Доверять этой строке на клиенте нельзя: любой может открыть URL напрямую и подставить чужой id.
Проверка выполняется только на сервере: параметры сортируются по алфавиту и собираются в строку через перевод строки, затем считается HMAC-SHA256 с ключом, производным от токена бота, и результат сравнивается с полученным hash.
Обязательно проверяйте поле auth_date и отклоняйте initData старше, скажем, 24 часов — иначе перехваченная строка работает бесконечно. После успешной проверки выдавайте собственную сессию, а не таскайте initData в каждом запросе.
Интерфейс: чем TWA отличается от мобильного сайта
Не рисуйте свою кнопку «Оформить заказ» внизу экрана — используйте MainButton из API: она нативная, всегда на месте и учитывает клавиатуру. Кнопка «Назад» тоже системная, через BackButton.
Цвета берите из themeParams: пользователь с тёмной темой Telegram ожидает тёмную витрину. Хардкод белого фона в тёмной теме выглядит как чужеродная вставка и снижает доверие.
Учитывайте безопасные зоны и высоту viewport из API, а не из CSS: свёрнутое и развёрнутое состояние окна различаются, и фиксированные элементы иначе перекрывают контент на iPhone.
Оплата и приём заказа
Есть два пути: встроенные платежи Telegram через инвойс от бота либо ваш собственный поток с локальными шлюзами Payme, Click или Uzum. На локальном рынке второй вариант чаще уместнее, потому что нужны знакомые пользователю кнопки банков.
Возврат из платёжного шлюза внутри встроенного браузера — тонкое место. Надёжнее закрыть Web App после инициации оплаты и присылать статус сообщением от бота: так пользователь получает подтверждение в чате, где он и так находится.
Через sendData можно отдать боту компактный JSON с результатом, но объём ограничен, а данные приходят как сервисное сообщение. Для заказов лучше писать напрямую в свой бэкенд, а sendData использовать для простых выборов.
Когда TWA лучше сайта или приложения
TWA выигрывает там, где аудитория уже в Telegram: доставка еды, запись на услуги, каталог с быстрым заказом, программы лояльности, внутренние сервисы для сотрудников. Нет установки, нет магазина приложений, нет регистрации.
Отдельный плюс — обновление на стороне сервера: вы деплоите новую версию, и все пользователи получают её мгновенно, без релиза в сторе и ожидания модерации.
Ограничения тоже реальны: нет полноценной работы офлайн, ограничен доступ к системным возможностям устройства, и вы полностью зависите от политики платформы. Для продукта с ежедневным использованием и push-логикой это может оказаться критично.
Практика разработки и бюджет
Тестировать нужно в реальном клиенте на Android и iOS: встроенные браузеры ведут себя по-разному, особенно с клавиатурой, прокруткой и фиксированными панелями. Десктопный Telegram — третий отдельный случай.
Держите бандл лёгким: TWA открывают с мобильного интернета, и правила про 3G здесь ровно те же. Статическая генерация и предзагрузка первого экрана дают ощутимую разницу в восприятии.
Ориентир по стоимости: простая витрина-каталог с корзиной — от 15 000 000 сум, вариант с личным кабинетом, оплатой и интеграцией с учётной системой — от 30 000 000 сум. Существующий сайт частично переиспользуется, но интерфейс придётся делать отдельно.