OnyxGram Developers

Web Apps

Мини-приложения, которые запускаются внутри OnyxGram из профиля бота, кнопки меню или списка приложений.

Обзор

Web App должен быть доступен по публичному HTTPS-адресу и корректно работать во встроенном WebView.

Настройка URL Main Mini App и кнопки меню задаются в приложении BotFather.

Запуск Main Mini App

После включения Main Mini App пользователи могут открыть приложение из профиля бота и других системных точек входа OnyxGram.

Откройте BotFather и выберите нужного бота.
Перейдите в настройки Mini App и укажите абсолютный HTTPS URL.
Включите Main Mini App и сохраните изменения.
Откройте профиль бота и проверьте запуск приложения.

Stars Боты с активным Main Mini App могут отображаться в списке примеров сервисов, где пользователи тратят звёзды.

Инициализация

Сообщите клиенту, что интерфейс готов, и используйте фактическую высоту WebView.

const webApp = window.Telegram?.WebApp;

webApp?.ready();
webApp?.expand();

document.documentElement.style.setProperty(
  '--app-height',
  `${webApp?.viewportStableHeight || window.innerHeight}px`
);

Безопасные отступы

Не используйте фиксированный нижний отступ. Учитывайте safe area клиента и системные панели устройства.

.app {
  min-height: var(--app-height, 100dvh);
  padding-top: var(--tg-safe-area-inset-top, env(safe-area-inset-top));
  padding-right: var(--tg-safe-area-inset-right, env(safe-area-inset-right));
  padding-bottom: var(--tg-safe-area-inset-bottom, env(safe-area-inset-bottom));
  padding-left: var(--tg-safe-area-inset-left, env(safe-area-inset-left));
}

Проверка данных

Передавайте Telegram.WebApp.initData на backend и проверяйте подпись до выполнения действий от имени пользователя.

Не доверяйте значениям из initDataUnsafe без серверной проверки.
Проверяйте срок действия данных авторизации.
Не храните токен бота в JavaScript-коде мини-приложения.