После последнего обновления теперь почти не видно главной кнопки мини-аппа на Андроиде из-за того, что она закатилась за системную панель.
Возможно у меня какой-то не тот Андроид, что поломал вид. А как у вас работает @DurgerKingBot?
———
🔄 Обновлено 09.05.25
В версии 8.0 баг пофиксен.
⬇️ @MiniAppsForLife
🔘 #наблюдения
Возможно у меня какой-то не тот Андроид, что поломал вид. А как у вас работает @DurgerKingBot?
———
В версии 8.0 баг пофиксен.
Please open Telegram to view this post
VIEW IN TELEGRAM
😱1
Новая версия АПИ принесла нам возможность показывать свою иконку при запуске мини-аппа
Делается очень просто через @BotFather →
/mybots → выбрать бота → Bot Settings → Configure Mini App → Configure Splash Screen. Там же есть возможность проверить как иконка будет выглядеть Но не все так просто, как казалось бы. Иконка должна соответствовать определенным требованиям — иметь внутри себя один
<path>. У меня даже с выполнением условия не сразу все загружалось, пришлось повозиться в разных графических редакторах чтобы верно сохранить И даже после этого возникли баги (см. скриншоты). На Айос иконка отображается некорректно, а на Андроиде все прекрасно. Более того, даже та иконка, что предлагается как пример самим Телеграмом выглядит криво. Ждем когда поправят, но надежды на скорый фикс у меня как-то мало
———
По прямой ссылке теперь иконка так же отображается.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
1👍3
This media is not supported in your browser
VIEW IN TELEGRAM
Периодически встречаю приложения, контент которых можно масштабировать жестами. Закрывать на это глаза, конечно же, не стоит, тем более, что исправляется такое поведение одной строчкой в html:
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=no, shrink-to-fit=no">
@MiniAppsForLife
#инструкции
Please open Telegram to view this post
VIEW IN TELEGRAM
11👍8✍3
Mini Apps For Life
Как многие и предполагали, количество пользователей в боте — это размер месячной аудитории по подсчетам самого Телеграма. Теперь это подтверждает подпись. Кстати, с ДР 🕯 ⬇️ @MiniAppsForLife 🔘 #наблюдения
Когда-то Телеграм для каждого бота показывал количество пользователей в месяц. Потом эта информация стала доступна только для ботов с аудиторией больше 10 тысяч (но это не точно).
Как же теперь авторам проверить, сколько по мнению мессенджера пользователей пользуется их ботом? Есть лазейка😄
Надо зайти в @BotFather →
⬇️ @MiniAppsForLife
🔘 #наблюдения
Как же теперь авторам проверить, сколько по мнению мессенджера пользователей пользуется их ботом? Есть лазейка
Надо зайти в @BotFather →
/mybots → выбрать бота → Bot Settings → Paid Broatcast и там будет искомая информация.Please open Telegram to view this post
VIEW IN TELEGRAM
3🙏4🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
Если в двух словах, то теперь для владельцев ботов доступна партнерская программа, которая позволяет любым пользователям Телеграма продвигать приложения и получать комиссионные за покупки, совершенные привлеченными ими людьми. Подробная статья, как это работает
Фича кажется крутой, включил ее в🍅 Помидорке на месяц. Если впишитесь в программу, то получите 50% от привлеченного пользователя🤑
Не упустите уникальную возможность потестить и заработать.
А еще, теперь напротив каждого мини-аппа появилась кнопка «Открыть», позволяющая запустить приложение сразу, не заходя в чат. Штука полезная, но выглядит сомнительно
Please open Telegram to view this post
VIEW IN TELEGRAM
1👍4❤2
Mini Apps For Life
Когда-то Телеграм для каждого бота показывал количество пользователей в месяц. Потом эта информация стала доступна только для ботов с аудиторией больше 10 тысяч (но это не точно). Как же теперь авторам проверить, сколько по мнению мессенджера пользователей…
Кстати, после запуска партнерской программы, в боте теперь показывается количество пользователей. Если программу завершить, то и счетчик скроется 👀
⬇️ @MiniAppsForLife
🔘 #наблюдения
Please open Telegram to view this post
VIEW IN TELEGRAM
4👀2
Mini Apps For Life
После последнего обновления теперь почти не видно главной кнопки мини-аппа на Андроиде из-за того, что она закатилась за системную панель. Возможно у меня какой-то не тот Андроид, что поломал вид. А как у вас работает @DurgerKingBot? ——— 🔄 Обновлено 09.05.25…
Please open Telegram to view this post
VIEW IN TELEGRAM
1👍4
Mini Apps For Life
This media is not supported in your browser
VIEW IN TELEGRAM
Таки поправил иконку при запуске мини-аппа. Для этого пришлось подредактировать файл так, чтобы в фигуре не было вырезанной области 🤔
⬇️ @MiniAppsForLife
🔘 #наблюдения
Please open Telegram to view this post
VIEW IN TELEGRAM
1👍2🔥1
В недавнем обновлении АПИ отключили поддержку мета-свойства
viewport-fit=contain и CSS-выражения env(safe-area-inset-*), но взамен дали нам две новых сущности:1️⃣ Safe Area Inset
Предоставляет значения отступов для разных сторон экрана, чтобы контент приложения отображался без перекрытия системными элементами устройства, такими как вырезы, закругленные края, камеры или индикаторы навигации.
// Доступ через JS
Telegram.WebApp.safeAreaInset.top
Telegram.WebApp.safeAreaInset.bottom
Telegram.WebApp.safeAreaInset.left
Telegram.WebApp.safeAreaInset.right
/* Аналог на CSS */
var(--tg-safe-area-inset-top)
var(--tg-safe-area-inset-bottom)
var(--tg-safe-area-inset-left)
var(--tg-safe-area-inset-right)
2️⃣ Content Safe Area Inset
Так же предоставляет значения отступов для разных сторон экрана, но теперь уже избегая наложения с элементами интерфейса самого Телеграма.
// Доступ через JS
Telegram.WebApp.contentSafeAreaInset.top
Telegram.WebApp.contentSafeAreaInset.bottom
Telegram.WebApp.contentSafeAreaInset.left
Telegram.WebApp.contentSafeAreaInset.right
/* Аналог на CSS */
var(--tg-content-safe-area-inset-top)
var(--tg-content-safe-area-inset-bottom)
var(--tg-content-safe-area-inset-left)
var(--tg-content-safe-area-inset-right)
*️⃣ Events
В дополнении к этому добавили два события
safeAreaChanged и contentSafeAreaChanged, которые пригодятся для отслеживания изменений отступов. Например, при повороте экрана или раскрытии на полный.🆗 Что со всем этим делать
Манипулировать паддингами и марджинами в зависимости от интерфейса приложения. В самом простом случае достаточно добавить глобально стили на обертку сайта:
.wrapper {
padding-top: calc(var(--tg-safe-area-inset-top) + var(--tg-content-safe-area-inset-top));
padding-right: calc(var(--tg-safe-area-inset-right) + var(--tg-content-safe-area-inset-right));
padding-bottom: calc(var(--tg-safe-area-inset-bottom) + var(--tg-content-safe-area-inset-bottom));
padding-left: calc(var(--tg-safe-area-inset-left) + var(--tg-content-safe-area-inset-left));
}
ℹ️ Нюансы и баги
— На клиенте для Мака, например, хочешь не хочешь, а пользователь в любом случае может включить фуллскрин из меню настроек, поэтому придется использовать
var(--tg-content-safe-area-inset-top).— На том же клиенте для Мака не обошлось без бага и в CSS-переменных значения для safe area inset попросту не приходят. Поэтому нужно прописать запасные значения, например, так
var(--tg-safe-area-inset-top, 0px).—
var(--tg-safe-area-inset-bottom)🔄 Обновлено 26.01.25: баг исправлен.
— В целом, значения content safe area inset для right, buttom и left как будто бы ни для чего не нужны, потому что Телеграм использует только в верхней части свои элементы.
🆒 Итог
Из всего вышесказанного, я для себя сделал такой итоговый CSS:
.wrapper {
padding-top: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top));
padding-right: var(--tg-safe-area-inset-right, 0px);
padding-bottom: var(--tg-safe-area-inset-bottom, 0px);
padding-left: var(--tg-safe-area-inset-left, 0px);
}
🔄 Обновлено 26.01.25: добавил bottom.
❓ Казалось бы, простая штука, а сколько много текста вышло. Пишите в комментах если есть чем дополнить?
@MiniAppsForLife
#инструкции
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
6🔥10❤6
This media is not supported in your browser
VIEW IN TELEGRAM
Делюсь красивостью 🎊
Думаю, всегда приятно получать обратную связь от интерфейса, а особенно — когда тратишь деньги.
Интересную анимацию можно найти на lottiefiles.com, поджать файл через lottiemizer.com и прикрутить к сайту с помощью lottie-web.
Всех с наступающим🎄
⬇️ @MiniAppsForLife
🔘 #инструменты
Думаю, всегда приятно получать обратную связь от интерфейса, а особенно — когда тратишь деньги.
Интересную анимацию можно найти на lottiefiles.com, поджать файл через lottiemizer.com и прикрутить к сайту с помощью lottie-web.
Всех с наступающим
Please open Telegram to view this post
VIEW IN TELEGRAM
2🔥9👍2☃1
This media is not supported in your browser
VIEW IN TELEGRAM
Просто прикольная фича 👾
Включается на Айфоне в дебаг-режиме (нажать 10 раз на кнопку настроек), пункт Ripple. Работает в любом чате.
⬇️ @MiniAppsForLife
🔘 #наблюдения
Включается на Айфоне в дебаг-режиме (нажать 10 раз на кнопку настроек), пункт Ripple. Работает в любом чате.
Please open Telegram to view this post
VIEW IN TELEGRAM
1👍5🥴2🌚1
🕳 Локальная разработка через туннель
При разработке мини-приложения удобнее всего запускать его в реальной среде, то есть через сам Телеграм. Здесь адекватно работает АПИ, присутствует сам интерфейс и передаются все пользовательские данные. Для этого можно заморочиться с тестовой средой или запустить сайт через туннель, что гораздо проще.
Туннель — это технология, позволяющая связать локальный хост с публичным URL, доступным через интернет. Другими словами, вы запускаете свой проект у себя на компьютере через условный
Сервисов туннелей есть множество. Я пробовал парочку:
🔜 Tuna
🔜 Ngrok
Но слышал и об этих:
➡️ localtunnel
➡️ Tunnelmole
➡️ Cloudflare Tunnel
➡️ VK Tunnel
В итоге остановился на Tune и даже купил подписку, так как устал от бесплатного лимита в 30 минут.
После несложной настройки завел отдельный
❓ Поделитесь опытом как и через что вы тестируете свои проекты?
⬇️ @MiniAppsForLife
🔘 #инструменты
При разработке мини-приложения удобнее всего запускать его в реальной среде, то есть через сам Телеграм. Здесь адекватно работает АПИ, присутствует сам интерфейс и передаются все пользовательские данные. Для этого можно заморочиться с тестовой средой или запустить сайт через туннель, что гораздо проще.
Туннель — это технология, позволяющая связать локальный хост с публичным URL, доступным через интернет. Другими словами, вы запускаете свой проект у себя на компьютере через условный
http://localhost:3000, а он виден глобально из интернета по какому-то определенному адресу (с https).Сервисов туннелей есть множество. Я пробовал парочку:
Но слышал и об этих:
В итоге остановился на Tune и даже купил подписку, так как устал от бесплатного лимита в 30 минут.
После несложной настройки завел отдельный
/newapp в @BotFather, куда передал статичный домен (в платной версии это доступно). То есть, у меня есть основной бот, где работает прод, и есть отдельный апп, где запускается дев-версия, когда я над ней работаю.Please open Telegram to view this post
VIEW IN TELEGRAM
2👍6🔥4⚡2❤1
В АПИ мини-аппов есть параметр
platform, который возвращает название платформы, на которой открыто приложение.Так как официальных клиентов несколько, то вот что попадает в его значение:
—
ios (Айфон и Айпад);—
macos (Мак);—
tdesktop (Мак и Винда);—
android (Андроид);—
weba (Веб А);—
web (Веб К);—
unknown (если не определено).Что можно с этим сделать? Ну, например, если у вас игра или тапалка, то можно открывать ее только на мобильных устройствах, а для десктопа показывать куаркод со сылкой.
Я использую этот параметр, чтобы показать, например, больше настроек на мобилках, типа фуллскрина и кнопки добавления на домашний экран.
А еще интерфейс приложений по мелочам разнится от клиента к клиенту и можно подтюнивать на каждом устройстве некоторые части, чтобы приложение выглядело роднее. Но это целая тема для отдельного поста.
Please open Telegram to view this post
VIEW IN TELEGRAM
2👍6
Mini Apps For Life
Бот, в котором можно смотреть, как все работает в мини-аппе — https://news.1rj.ru/str/asmico_attach_bot Кнопки и их расположение, цвета, открытие ссылок, виброотклики, облачное хранилище и другие методы. Пользуюсь частенько сам. ❓ Если вы знаете что-то похожее с примерами…
Мой читататель нашел исходник этого бота и поделился в комментариях ссылкой на Гитхаб.
Там все на чистом JS, можно подсмотреть, как все реализовано и работает. Спасибо, @userUsersss👍
⬇️ @MiniAppsForLife
🔘 #инструменты
Там все на чистом JS, можно подсмотреть, как все реализовано и работает. Спасибо, @userUsersss
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3🔥2😁1
icon-telegram-stars.noscript
508 B
Делюсь SVG-иконкой Телеграм Stars, а заодно и просто кодом, пригодится ⭐️
UPD: В комментах еще больше вариантов.
@MiniAppsForLife
#инструменты
<noscript xmlns="http://www.w3.org/2000/noscript" viewBox="0 0 24 24">
<path d="m11.47 18.6-4.5 2.73a1 1 0 0 1-1.37-.32.98.98 0 0 1-.12-.76l.7-2.73c.25-.98.93-1.8 1.85-2.24l4.91-2.34a.46.46 0 0 0 .22-.61.46.46 0 0 0-.5-.25l-5.46.94a3.85 3.85 0 0 1-3.12-.84l-1.72-1.43A.98.98 0 0 1 2.92 9l5.27-.41a1 1 0 0 0 .84-.61l2.04-4.88a1 1 0 0 1 1.83 0l2.04 4.88a1 1 0 0 0 .84.6l5.3.42a.99.99 0 0 1 .57 1.73l-4.04 3.43a.98.98 0 0 0-.33.98l1.25 5.13a.99.99 0 0 1-.74 1.2 1 1 0 0 1-.75-.13L12.5 18.6a1 1 0 0 0-1.03 0Z" />
</noscript>
UPD: В комментах еще больше вариантов.
@MiniAppsForLife
#инструменты
Please open Telegram to view this post
VIEW IN TELEGRAM
8👍12🔥9🤝1
Некоторые мини-приложения удобнее использовать в определенной ориентации экрана. Если пользователь случайно повернет устройство, это может сломать интерфейс или испортить опыт взаимодействия. Блокировка ориентации экрана поможет избежать таких проблем, сохраняя комфорт и предсказуемость.
Для управления ориентацией в АПИ доступны два метода:
lockOrientation() и unlockOrientation().Но сперва учтем некоторые моменты: экран можно поворачивать, поэтому нужно отслеживать ориентацию в реальном времени, чтобы в определенный момент заблокировать экран. Также пользователь может свернуть приложение, повернуть устройство и снова открыть его — это тоже нужно учитывать. Работать будем только с мобильными устройствами, так как на десктопах ориентация обычно горизонтальная, и ее поддержка только усложнит задачу.
Ниже я написал готовый код на чистом JS без привязки к фреймворку, чтобы можно было легко разобраться и затащить к себе. Пример блокирует устройство в портретном состоянии:
// Проверка поддержки ориентации в браузере
const isOrientationSupported = 'orientation' in screen;
// Блокировка и разблокировка ориентации
const lockOrientation = () => Telegram.WebApp.lockOrientation();
const unlockOrientation = () => Telegram.WebApp.unlockOrientation();
// Проверка текущей ориентации
const checkOrientation = () => {
// Работа только с мобильными устройствами
if (!['ios', 'android'].includes(Telegram.WebApp.platform)) {
return false;
}
// Блокировка при портретной (вертикальной) ориентации
if (screen.orientation.type.startsWith('portrait')) {
lockOrientation();
// Разблокировка при ландшафтной (горизонтальной) ориентации
} else if (screen.orientation.type.startsWith('landscape')) {
unlockOrientation();
}
};
// Установка слушателей событий
const setupOrientationListeners = () => {
if (!isOrientationSupported) {
return false;
}
// Прослушка изменения ориентации в реальном времени
window.addEventListener('orientationchange', checkOrientation);
// Прослушка событий сворачивания и разворачивания приложения
Telegram.WebApp.onEvent('activated', checkOrientation);
Telegram.WebApp.onEvent('deactivated', unlockOrientation);
}
// Очистка слушателей событий
const cleanupOrientationListeners = () => {
if (!isOrientationSupported) {
return false;
}
// Отписка от слушателей изменения ориентации
window.removeEventListener('orientationchange', checkOrientation);
// Отписка от слушателей сворачивания и разворачивания
Telegram.WebApp.offEvent('activated', checkOrientation);
Telegram.WebApp.offEvent('deactivated', unlockOrientation);
};
// Инициализация
checkOrientation();
setupOrientationListeners();
// Очистка (при необходимости)
// cleanupOrientationListeners();
Потестировать можно в
Please open Telegram to view this post
VIEW IN TELEGRAM
3👍9🔥6❤3
Оформил тут на досуге популярный канал и чат про мини-приложения, в котором состою, и который однажды, собственно, меня и подтолкнул на создание своего канала 💡
Спасибо автору @rvignatenko за отзывчивость и доверие✋
Присоединяйтесь к «зеленому» сообществу:
🚀 Telegram Mini Apps 🚀 с Романом Игнатенко
💬 Чат про Telegram Mini Apps
⬇️ @MiniAppsForLife
🔘 #личное
Спасибо автору @rvignatenko за отзывчивость и доверие
Присоединяйтесь к «зеленому» сообществу:
Please open Telegram to view this post
VIEW IN TELEGRAM
2🔥5👍3👏2
This media is not supported in your browser
VIEW IN TELEGRAM
В мае прошлого года вышло обновление в котором можно добавлять эффект при отправке сообщения в личной переписке.
От имени бота так же можно добавлять такой эффект в некоторых методах, используя уникальный идентификатор в параметре
message_effect_id, но их всего шесть:🔥 —
5104841245755180586👍 —
5107584321108051014❤️ —
5159385139981059251🎉 —
5046509860389126442👎 —
5104858069142078462💩 —
5046589136895476101Спасибо @kulikov_aleks за наводку
Please open Telegram to view this post
VIEW IN TELEGRAM
2🔥13🙏6
Часто замечаю в мини-аппах использование таббара. Проблема в том, что зачастую он прилипает к хоум-индикатору Айфона.
У Ильи Бирмана недавно вышел разбор про этот момент на Ютубе. Посмотрите на досуге, там всего две с половиной минуты.
Справедливости ради, стоит сказать, что автор этого приложения попытался это учесть, используя
Напомню, что я как-то писал пост про безопасные зоны. Там были нюансы, но Телеграм частично их поправил, где я пометил обновлениями.
⬇️ @MiniAppsForLife
🔘 #инструкции
У Ильи Бирмана недавно вышел разбор про этот момент на Ютубе. Посмотрите на досуге, там всего две с половиной минуты.
Справедливости ради, стоит сказать, что автор этого приложения попытался это учесть, используя
env(safe-area-inset-bottom), но в Телеграме такое не поддерживается и надо явно прописать var(--tg-safe-area-inset-bottom, 0px).Напомню, что я как-то писал пост про безопасные зоны. Там были нюансы, но Телеграм частично их поправил, где я пометил обновлениями.
Please open Telegram to view this post
VIEW IN TELEGRAM
2🔥13👌6❤3👍2