🔤 Блокировка выделения текста

При взаимодействии с интерфейсом на мобильных устройствах может возникнуть ситуация, когда при долгом нажатии на экране автоматически выделяется ближайший текст и поверх него появляется системная лупа. Это может мешать комфортному использованию интерактивных элементов в приложениях или играх.

Чтобы его убрать достаточно прописать в CSS такое правило глобально для всего приложения или точечно для определенного блока:

/* Отключить для всего сайта */
html {
  -webkit-user-select: none;
  user-select: none;
}

/* Отключить для отдельного блока */
.block {
  -webkit-user-select: none;
  user-select: none;
}

Этот код запрещает что-либо выделять, соответственно, и лупа не появляется. При этом выделения в полях ввода сохраняют работоспособность.

Если потребуется, то для нужного блока можно вернуть выделение:

/* Включить для отдельного блока */
.block {
  -webkit-user-select: text;
  user-select: text;
}

@MiniAppsForLife
#инструкции

Ранее уже упоминал, что перешел на Grammy и в ус не дую 🥤

Пока единственный пробел был в валидации данных пользователя, но и тут нашелся плагин 💻 grammyjs/validator.

⬇️@MiniAppsForLife
🔘#инструменты

↔️ Умный фуллскрин

Добавляя автоматическое открытие мини-аппа в полноэкранном режиме, важно не забывать, что пользователь может запустить приложение с любого клиента, будь то мобилка, десктоп или веб-версия.

Если на мобилке автоматический фуллскрин выглядит логично и удобно, то на десктопе или в браузере такое поведение может вызывать недоумение.

Поэтому самым подходящим способом будет определение мобилки и программный запуск на полный экран:

if (['ios', 'android'].includes(Telegram.WebApp.platform)) {
  Telegram.WebApp.requestFullscreen()
}

А на десктопе и в веб-версии фуллскрин и так можно запустить вручную через меню (три точки) или по отдельной кнопке в интерфейсе.

⬇️@MiniAppsForLife
🔘#инструкции

Наткнулся на конкурс авторских телеграм-каналов, где помогают молодым авторам найти свою аудиторию. Решил тоже поучаствовать.

Заодно определился с категорией — юзабилити. Давно не слышал этого слова, но оно как раз точно описывает, о чем хочется писать.

Кстати, найти хорошие авторские каналы — тот еще квест. Многие, на кого я подписан, уже довольно крупные, с тысячами подписчиков. А вот новые, интересные, — их еще поискать надо.

Поэтому сейчас все чаще заглядываю в профили людей в чатах и комментариях. Уже подписался на пяток интересных. Иногда заглядываю и к своим читателям — если тема заходит, тоже подписываюсь в ответ.

Лендинг конкурса — tg-contest.tilda.ws. Можно глянуть, почитать и тоже вписаться, если интересно.

Главный канал — @tg_contest_main. Там будут подборки, активности, контент участников и голосование за «Выбор читателей».

⬇️@MiniAppsForLife
🔘#личное

⭐ Избранное на канале

Сколько бы ни прошло времени, многие посты не теряют своей актуальности, поэтому собрал их здесь для удобства и порядка. Пост в закрепе 📎

Окружение:

➡️ Локальная разработка через туннель
➡️ Режим отладки с помощью инспектора

Настройка:

➡️ Добавление иконки на домашний экран телефона
➡️ Запуск из любого чата
➡️ Отображение кол-ва пользователей
➡️ Настройка сплэш-экрана
➡️ Идентификаторы профилей

Разработка:

➡️ Локализация бота
➡️ Блокировка ориентации экрана
➡️ Определение устройства
➡️ Блокировка выделения текста
➡️ Умный фуллскрин
➡️ Кэширование скрипта инициализации
➡️ Кнопка «Назад»

Оформление:

➡️ Светлая и темная темы
➡️ Безопасные зоны
➡️ SVG-иконка Star
➡️ Отключение зума
➡️ Анимированные эффекты при отправке сообщения
➡️ Эффект блеска на кнопке
➡️ Нюансы при создании таббара

Инструменты:

➡️ asmico_attach_bot
➡️ GrammY (валидатор initData)
➡️ WebpageBot
➡️ Lottie

@MiniAppsForLife

🆕 Новое в версии АПИ 9.1 для мини-аппов

Добавили новый метод hideKeyboard() для скрытия системной клавиатуры.

Я знаю лишь одно раздражающее поведение этой клавиатуры на Айос устройствах — это то, когда она сама не скрывается после потери фокуса полем ввода. Во всех остальных случаях, кажется, всегда работало как надо.

❔ Как думаете, в каких кейсах новый метод пригодился бы еще?

⬇️@MiniAppsForLife
🔘#новости

@BotFather обзавелся своим мини-приложением. Теперь там можно делать то же самое, что и обычными командами 👍

⬇️@MiniAppsForLife
🔘#новости

Второй официальный бот @Stickers тоже обзавелся своим мини-приложением.

⬇️@MiniAppsForLife
🔘#новости

🍅 Помидорка теперь бесплатная

Решил убрать оплату в звездах, так как толку от этого особо нет. За полтора года существования пришло 1000 звезд, то есть купили всего 10 человек, из которых треть — это я и мои знакомые. Думаю, пусть уж будет бесплатно больше пользы приносить, чем ограничивать людей барьером из звезд.

В итоге вышло, что 1000 звезд — это 4,2045 TON, то есть примерно 1055 ₽. Что как бы копейки для такого промежутка времени.

В целом, я на многое и не рассчитывал. Проект был экспериментальным. Мне хотелось залететь с ним в каталог Telegram Mini Apps, где были достаточно примитивные аналоги.

Где-то за пару недель прошел модерацию и о приложении даже написали пост в канале на 800 тысяч читателей на тот момент. К слову, в первый день ко мне пришло человек 500.

Спасибо всем кто поддержал монетой, это вдохновляло меня. Мини-приложение продолжает работу, я его никуда не убираю. Пусть радует и помогает, это будет греть мою душу 🍸

⬇️@MiniAppsForLife
🔘#личное

На первых порах, когда только-только появился MAX, зарегистрировал там несколько ботов. Ничего с ними не делал, только имена забронировал для своих проектов на всякий случай. Кстати, это было не просто — придумать названия минимум из 11 символов.

Сейчас уже как месяц вообще функция создания новых ботов отключена. А вот сегодня пришло такое сообщение. Есть подозрение, что теперь только юридические лица имеют право владеть ботами и мини-приложениями 🤔

⬇️@MiniAppsForLife
🔘#личное

Третий официальный бот @Bugs теперь тоже запускается через мини-приложение.

Ну, и чтобы два раза не вставать, наконец-то хоть какое-то крупное приложение стало поддерживать «жидкое стекло» на iOS 26. Остальные пока чего-то ждут, хотя с бета-версии уже месяца четыре прошло 🤷‍♂️

⬇️@MiniAppsForLife
🔘#новости

🔙 Кнопка «Назад»

В верхней части интерфейса мини-аппа можно отобразить кнопку «Назад» вместо стандартной «Закрыть», если пользователь перемещается между страницами или открывает всплывающие окна. Это помогает не теряться в приложении и делает навигацию интуитивной.

Однако важно понимать, что эта кнопка работает не так, как в браузере. Она не хранит историю переходов и не управляет стейтом автоматически. Это полностью программируемый элемент — он ведет себя ровно так, как вы ему скажете.

По документации, у объекта BackButton есть следующие свойства и методы:

— isVisible — проверяет, видна ли кнопка;
— onClick(callback) — подписывает обработчик на нажатие;
— offClick(callback) — отписывает обработчик;
— show() — показывает кнопку;
— hide() — скрывает кнопку.

Все методы возвращают сам объект BackButton, поэтому их можно объединять в цепочки:

Telegram.WebApp.BackButton
  .show()
  .onClick(onBackButton);

// Позже, при необходимости:
Telegram.WebApp.BackButton
  .hide()
  .offClick(onBackButton);

function onBackButton() {
  // Какое-то действие
}

Важно не забывать отписываться от события после смены экрана или завершения действия — иначе возможны утечки памяти или неожиданное поведение.

Ещё один частый вопрос о том, почему кнопка перестает работать, если внутри мини-аппа перейти на другой сайт. Дело в том, что как только вы покидаете исходную страницу приложения, скрипт telegram-web-app.js больше не активен на новой странице. Кнопка остается в последнем состоянии и ее методы перестают работать, ведь на новом сайте, скорее всего, нет подключенного скрипта.

⬇️@MiniAppsForLife
🔘#инструкции

💪 Главная и второстепенная кнопки

В нижней части интерфейса мини-аппа можно разместить одну или две кнопки действия. Это может быть кнопка для отправки формы, совершения покупки, сохранения настроек и т. п. Кнопки можно расположить рядом или друг под другом в разной последовательности.

Согласно документации, MainButton и SecondaryButton являются производными более низкоуровневого объекта BottomButton, который содержит множество свойств и методов, возвращающих сам объект BottomButton, поэтому их удобно объединять в цепочки:

// Главная кнопка:
Telegram.WebApp.MainButton
  .show()
  .setText('Отправить')
  .onClick(onBackButton);

// Второстепенная кнопка:
Telegram.WebApp.SecondaryButton
  .show()
  .setText('Отменить')
  .onClick(onSecondaryButton);

// Отписка при необходимости:
Telegram.WebApp.MainButton
  .hide()
  .offClick(onBackButton);

// Отписка при необходимости:
Telegram.WebApp.SecondaryButton
  .hide()
  .offClick(onSecondaryButton);

function onMainButton() {
  // Какое-то главное действие
}

function onSecondaryButton() {
  // Какое-то второстепенное действие
}

Важно не забывать отписываться от события после смены экрана или завершения действия — иначе возможны утечки памяти или неожиданное поведение.

Так же стоит отметить, что добавление такой кнопки помогает обойти распространённый баг на iOS, при котором контент «улетает» вверх страницы при фокусе на поле ввода и появлении клавиатуры.

⬇️@MiniAppsForLife
🔘#инструкции