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

На днях подвезли два новых функционала для работы с хранилищами:

➡️ DeviceStorage. Позволяет использовать постоянное локальное хранилище на устройстве пользователя. Это аналог localStorage браузера, но интегрированый в клиент Телеграм.

➡️ SecureStorage. Позволяет использовать безопасное локальное хранилище на устройстве пользователя для конфиденциальных данных. Подходит для хранения токенов, секретов, состояния аутентификации и т. п.

Как итог, теперь мы имеем три сущности CloudStorage, DeviceStorage и SecureStorage.

Правда, есть ощущение, что при обновлении забыли изменить версию скрипта, отчего эти новые функции просто нет возможности проверить. То есть на всех клиентах Telegram.WebApp.version = 8.0 и пока обновлений в сторах не видно, а прошло уже 4 дня 🤷‍♂️

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

📞 Павел на связи

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

Удивительно, но Павел дал ответ! По каким-то причинам тексты сообщений не разглашаются, но важен сам факт, что Павел готов прислушаться.

Описание багов собирают в этом чате. По итогу будет сформирован файл и отправлен начальнику 📨

⬇️@MiniAppsForLife
🔘#наблюдения

🆔 Идентификаторы профилей

По мере работы с АПИ иногда нужно быстро узнать ID пользователя, канала, группы или бота. Включить отображение идентификатора в профиле искомой сущности можно через:

➡️ Telegram Desktop: Настройки ▶️ Продвинутые настройки ▶️ Экспериментальные настройки ▶️ опция Show Peer IDs in Profile ✅

➡️ Telegram для MacOS: Настройки ▶️ Общие ▶️ опция «Показывать ID чатов в профиле»  ✅

Стоит учесть, что в случае с группами и каналами к айдишнику в начале еще нужно приписать -100. То есть, если в профиле ID указан как 123456789, то итоговый ID будет -100123456789.

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

🥸 История про мошенника

Пару лет назад ко мне начали стучаться люди с вопросами о неком «разработчике». В своем резюме он опубликовал примеры из разных ботов и сервисов, которые якобы разрабатывал. Первой шла моя 👛 Копилка.

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

Некоторые писали после оплаты, когда мошенник уже исчезал. Я предупреждал их, даже пытался связаться с ним сам — но он использовал разные аккаунты, и ответов не было.

Один случай запомнился особенно. На вопрос клиента: «Почему вы не указаны как разработчик?» — он ответил, что я якобы был заказчиком, а он создал бота для меня.

Проблема большинства «его» проектов в том, что там отсутствовало авторство. Я даже хотел было написать пострадавшим и предупредить, но не смог этого сделать.

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

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

❓ Расскажите, были ли у вас похожие случаи и как вообще справляться с такими ситуациями?

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

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

В документации, начиная с версии АПИ 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
🔘#новости

Второй официальный бот @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
🔘#инструкции