✨ Эффект блеска на кнопке

В документации, начиная с версии АПИ 7.10, есть вот такой прикольный эффект блеска главной и второстепенной кнопок для привлечения внимания.

Делается через параметр has_shine_effect в методе setParams:

// Главная кнопка
Telegram.WebApp.MainButton.setParams({
  has_shine_effect: true,
})

// Второстепенная кнопка
Telegram.WebApp.SecondaryButton.setParams({
  has_shine_effect: true,
})

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

📞 Павел перезвонил

Вчера вышла новая версия Телеграма для Айос и Макос. Починили почти все пункты, которые сообщество собирало пару недель назад. Оперативно 🔥

Из самого главного — наконец-то пропал непонятный отступ на Айфоне внизу страницы, который появлялся при скролле в тех случаях, когда не было нативных кнопок BottomButton ✔️

Заодно исправили баг с инпутами и клавиатурой, когда при ее открытии невозможно было доскроллить до конца страницы или сфокусированного поля ✔️

Полный список правок Владислав привел в этом посте.

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

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

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

Чтобы его убрать достаточно прописать в 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
🔘#новости