Тестируем веб приложения для ботов Telegram, в статье примеры работы VK mini apps в Telegram
16 апреля Telegram анонсировал Веб приложения для ботов. Теперь в интерфейсе ботов можно воссоздать или разработать новый дизайн, функционал сайта или мобильного приложения.
Как будут работать веб приложения в Telegram покажу на примере мини приложений для VK - Boxberry, доставка цветов Flawery, Vsemayki, Футбол (Матч -Центр). Приложения открываются внутри мессенджера.
Для исследования я авторизовался в VK на смартфоне, скопировал ссылки на несколько мини приложений VK, для демонстрации работы создал бота VK apps, разместил ссылки на эти приложения и добавил кнопки к этим ссылкам. Как и предполагалось приложения открываются и работают внутри мессенджера. Посмотреть можно в боте VK apps.
Скрины экранов Boxberry в Telegram:
Скрины экранов приложения Футбол (Матч центр)
Конечно, не все приложения VK подходят, отображаются и работают корректно. Эти примеры я разместил с целью показать какими могут быть боты Telegram после обновления Web apps Telegram.
Хорошо работают только те, что соответствуют рекомендациям web apps Telegram:
Рекомендации по дизайну
Приложения Telegram известны своей быстротой, плавностью и последовательным кроссплатформенным дизайном. Ваше веб-приложение должно идеально отражать эти принципы.
Все элементы должны быть адаптивными и разработаны с учетом подхода, ориентированного на мобильные устройства.
Интерактивные элементы должны имитировать стиль, поведение и назначение уже существующих компонентов пользовательского интерфейса.
Все включенные анимации должны быть плавными, в идеале 60 кадров в секунду.
Все входные данные и изображения должны содержать метки для обеспечения доступности.
Приложение должно обеспечивать бесперебойную работу, отслеживая
динамические цвета на основе темы, предоставляемые API, и используя их соответствующим образом.
В предыдущей статье я описывал Bio Link Bot - свой бесплатный конструктор ботов с применением web apps Telegram, в нем я сделал VK apps bot описанный в этой статье.
Почему название VK apps - ассоциации только с социальной сетью ВКонтакте 🤔
Но по факту ведь речь только про Телеграм - или не так понял?
В этой статье проверили возможность публикации в Telegram-ботах новых Web Apps, используя уже готовые проекты VK Mini Apps, как я понял
Ничего не понятно. Как использовать новые обновления? Что нужно делать для того что бы собрать? На чем собрать? Что учитывать?
Ставлю статье плюс, в надежде что дополните.
Дополню
Не кто не сталкивался, с тем что в Desktop версии (window) телеграмма в WebApps не работает часть браузерного API, например тот же alert() ?
Для отображения в клиенте телеграм под Windows используется Microsoft Edge Webview. В таком случае для проверки корректности работы веб-приложения нужно проверять работу с браузерами от Microsoft. Вероятнее всего в данном случае js проверяемого сайта неверно толкуется данными браузерами, возможно есть ошибка в синтаксисе, критичная именно для этих браузеров.
Совет попробовать открыть сайт в edge и посмотреть вывод в консоли. Вероятнее всего там ошибка