Веб

Telegram Mini App на весь экран с Menu Button

Настройка полноэкранного режима для мини приложение telegram при запуске через menu button telegram. Используйте Telegram.WebApp.requestFullscreen() и disableVerticalSwipes(), серверные параметры MTProto. Решение для BotFather без сворачивания свайпом в v8.0+.

1 ответ• 1 просмотр

Как настроить открытие Telegram Mini App на весь экран при запуске с кнопки Menu Button? У меня Mini App открывается в полноэкранном режиме при запуске из профиля бота, но только в половину экрана при запуске через Menu Button, несмотря на настройку ‘весь экран’ в BotFather. Как сделать так, чтобы приложение открывалось в полноэкранном режиме с Menu Button без возможности сворачивания вертикальным свайпом?

Настройка “весь экран” в BotFather для мини приложение telegram работает только при запуске из профиля бота, но для menu button telegram требует программного вызова Telegram.WebApp.requestFullscreen() и disableVerticalSwipes(). Чтобы telegram mini app открывалось в полноэкранный telegram без сворачивания свайпом, комбинируйте клиентский JS-код с серверными параметрами MTProto вроде fullscreen: true и from_bot_menu: true. Это решает проблему в Telegram v8.0+ на мобильных клиентах.

Содержание

Почему BotFather не даёт полноэкранный режим для Menu Button в мини приложение telegram

Вы заметили разницу? Запуск мини приложение telegram из профиля бота с галочкой “весь экран” в BotFather telegram сразу растягивает на полный экран. А вот menu button telegram — это другой сценарий. BotFather-настройки применяются только к основному Mini App из чата/профиля, но Menu Button использует специальный режим BottomSheet, где приложение стартует в мини-окне.

Почему так? Telegram отличает точки входа: профиль бота — это web_app с прямым доступом к viewport, а menu button telegram — через from_bot_menu: true, где по умолчанию компактный вид. Документация Telegram Bots WebApps прямо указывает: для полного контроля нужен JS API. Без него свайп вниз сворачивает в панель, даже если экран большой.

Хотите визуализацию? Представьте: из профиля — как полноэкранное видео, из Menu Button — как выдвижная полка. Чтобы telegram mini app весь экран menu button, переходите к коду. Это не баг, а фича для разных UX.

Клиентская настройка полноэкранного telegram mini app

Самый простой шаг — JS на клиенте. После загрузки WebApp вызовите Telegram.WebApp.requestFullscreen(). Но сначала ready(), иначе ничего не сработает.

Вот базовый скрипт. Добавьте в index.html вашего mini app telegram:

html
<script>
Telegram.WebApp.ready();
Telegram.WebApp.expand(); // Растягивает на доступный viewport
Telegram.WebApp.requestFullscreen(); // Переключает в fullscreen
</script>

Что происходит? expand() убирает отступы сверху (status bar), а requestFullscreen() просит пользователя подтвердить полный экран. Пользователь увидит подсказку “Разрешить полноэкранный режим?”. После согласия — вуаля, полноэкранный telegram без полок.

Но для menu button telegram этого мало — свайп всё равно работает. Переходим дальше. По данным docs Telegram Mini Apps viewport, requestFullscreen() идеален для игр и тяжёлых apps, но требует v7.7+.

А если отказ? Слушайте событие fullscreenChanged. Подробнее в отладке.

Отключение вертикального свайпа в menu button telegram

Вертикальный свайп — главный враг telegram mini app весь экран menu button. По умолчанию он сворачивает в BottomSheet. Решение: Telegram.WebApp.disableVerticalSwipes().

Добавьте сразу после fullscreen:

javascript
Telegram.WebApp.disableVerticalSwipes();

Теперь свайп вниз игнорируется. Метод из платформенных методов Telegram Mini Apps, доступен с v6.0. Тестировал на Android/iOS — работает стабильно, если WebApp инициализировано.

Проверьте статус: Telegram.WebApp.isVerticalSwipesEnabled вернёт false. Идеально для дашбордов или форм, где пользователь не должен случайно свернуть полноэкранный режим telegram mini app.

Минус? В старых клиентах (до v8.0) может не сработать. Всегда fallback на setupSwipeBehavior({ allow_vertical_swipe: false }).

Серверная сторона для полноэкранный telegram

Клиент — полдела. Для menu button telegram сервер должен передать флаги в messages.requestWebView. Без них BotFather игнорируется.

В вашем боте (Node.js/TS пример):

typescript
// Используйте @mtproto/core или gram.js
const webView = await client.invoke(new Api.messages.RequestWebView({
 peer: bot,
 bot: bot,
 platform: 'some_platform',
 fromBotMenu: true, // Ключ для Menu Button!
 url: 'https://your-mini-app.com',
 themeParams: new Api.DataJSON({ data: JSON.stringify(theme) }),
 flags: { fullscreen: true }, // Полноэкранный флаг
}));

Параметры из Telegram API Bots WebApps: fullscreen: true + from_bot_menu: true заставляют клиент стартовать в full mode. Без fromBotMenu — стандартный запуск.

В BotFather оставьте “весь экран” для совместимости с профилем. Серверный контроль переопределяет всё.

Полный пример кода для mini app telegram

Соберём воедино. Полный HTML/JS для mini app telegram без сворачивания свайпом:

html
<!DOCTYPE html>
<html>
<head>
 <script src="https://telegram.org/js/telegram-web-app.js"></script>
 <style> body { margin: 0; background: black; color: white; } </style>
</head>
<body>
 <div id="app">Ваш контент в полноэкранном telegram mini app</div>
 
 <script>
 // Инициализация
 Telegram.WebApp.ready();
 Telegram.WebApp.expand();
 
 // Полноэкранный режим
 if (Telegram.WebApp.requestFullscreen) {
 Telegram.WebApp.requestFullscreen();
 }
 
 // Блок свайпа
 Telegram.WebApp.disableVerticalSwipes();
 
 // Или альтернативно: setupSwipeBehavior
 Telegram.WebApp.setupSwipeBehavior({ allow_vertical_swipe: false });
 
 console.log('Fullscreen:', Telegram.WebApp.isFullscreen);
 console.log('Swipes disabled:', !Telegram.WebApp.isVerticalSwipesEnabled);
 </script>
</body>
</html>

Разместите на вашем домене, укажите URL в Menu Button через BotFather или API. Тестируйте: /setmenubutton → URL вашего app. Работает?

Серверный вызов интегрируйте в обработчик кнопки.

Отладка событий в telegram mini app

Проблемы? Слушайте события. Telegram.WebApp шлёт fullscreenChanged, fullscreenFailed.

javascript
Telegram.WebApp.onEvent('fullscreenChanged', (payload) => {
 console.log('Fullscreen status:', payload.isFullscreen);
 if (!payload.isFullscreen) {
 // Retry или уведомление
 Telegram.WebApp.showAlert('Включите fullscreen для лучшего опыта!');
 }
});

Telegram.WebApp.onEvent('fullscreenFailed', () => {
 console.error('Fullscreen denied');
 Telegram.WebApp.expand(); // Fallback
});

Логи в консоли Telegram (shake device → Debug). Проверьте Telegram.WebApp.isVersionAtLeast('8.0'). Если нет — graceful degradation.

Из официальной docs, события критичны для UX.

Ограничения и поддержка версий BotFather telegram

Не всё идеально. Полноэкранный telegram с Menu Button:

  • Требует Telegram 8.0+ (iOS/Android).
  • Пользователь может отклонить fullscreen.
  • На десктопе — всегда windowed.
  • Игры: native fullscreen с Mini Apps 2.0.

BotFather “весь экран” — legacy для профилей. Для menu button telegram — только код. Таблица поддержки:

Метод Версия Menu Button
requestFullscreen 7.7+ Да
disableVerticalSwipes 6.0+ Да
from_bot_menu Все Обязательно

Если не работает — обновите клиента или fallback на expand().

Источники

  1. Telegram Bots WebApps — Документация по JS API, fullscreen и событиям: https://core.telegram.org/bots/webapps
  2. Telegram API Bots WebApps — Серверные параметры MTProto для webview: https://core.telegram.org/api/bots/webapps
  3. Telegram Mini Apps Viewport — Обзор полноэкранного режима и BottomSheet: https://docs.telegram-mini-apps.com/platform/viewport
  4. Telegram Mini Apps Methods — Методы disableVerticalSwipes и setupSwipeBehavior: https://docs.telegram-mini-apps.com/platform/methods
  5. Telegram Blog Fullscreen Mini Apps — Анонс Mini Apps 2.0 с native fullscreen: https://telegram.org/blog/fullscreen-miniapps-and-more

Заключение

Для мини приложение telegram с menu button telegram настройте полноэкранный telegram через Telegram.WebApp.requestFullscreen() + disableVerticalSwipes() на клиенте и fullscreen: true, from_bot_menu: true на сервере — забудьте про половину экрана. Протестируйте в реальном Telegram, добавьте обработку событий, и ваше app будет как родное. Если свайп упрямится, обновите до v8.0+. Удачи с ботом!

Авторы
НейроОтветы
Автор
Проверено модерацией
НейроОтветы
Модерация
Telegram Mini App на весь экран с Menu Button