Мини-приложения
Мини-приложения (или веб-приложения) в MAX — это, на мой взгляд, одна из самых мощных фич платформы. По сути, это полноценные веб-приложения, которые запускаются прямо внутри мессенджера. Я пока не делал мини-приложение для «Мои друзья», но активно изучаю эту тему — и сейчас расскажу, что к чему.
Что такое мини-приложения?
Мини-приложение — это iframe с твоим веб-приложением, который открывается внутри MAX. Пользователь не переходит в браузер и не устанавливает отдельное приложение — всё происходит внутри мессенджера.
Технически это обычная веб-страница: HTML, CSS и JavaScript. Никаких специфических фреймворков не требуется (хотя React, Vue или Svelte отлично подходят). MAX предоставляет библиотеку MAX Bridge для взаимодействия с API мессенджера и библиотеку MAX UI для нативных компонентов интерфейса.
Преимущества мини-приложений
Почему я считаю мини-приложения крутой идеей:
Не нужно дорабатывать под платформы
Ты пишешь один код на HTML/JS/CSS — и он работает везде, где работает MAX: на Android, iOS, в веб-версии. Не нужно выпускать отдельные билды для Google Play и App Store. Один коммит — и обновление сразу у всех пользователей.
Не нужна модерация в сторах
Никакого App Review и Google Play Review. Твоё мини-приложение проходит модерацию один раз при размещении на платформе MAX — и всё. Никаких «мы отклонили ваше обновление из-за пункта 4.2.6». Это экономит недели нервов.
Доступ к данным MAX
Через MAX Bridge мини-приложение получает доступ к:
- Профилю пользователя (имя, аватар, язык)
- Теме оформления (светлая/тёмная — подстраивай интерфейс автоматически)
- Платформенным данным (версия MAX, устройство)
Пользователю не нужно регистрироваться заново — он уже авторизован в MAX, и приложение получает его данные.
Технологии
Мини-приложения MAX строятся на трёх китах:
HTML/JS/CSS
Никаких ограничений по фреймворкам. Хочешь — пиши на чистом JavaScript. Хочешь — бери React, Vue, Angular, Svelte, да хоть jQuery. Всё, что работает в WebView, работает в MAX.
MAX Bridge
Это JavaScript-библиотека, которая связывает твоё веб-приложение с нативными функциями MAX. Через Bridge ты можешь:
- Получать данные пользователя
- Отправлять данные в чат (например, результат игры)
- Закрывать мини-приложение
- Получать initData для валидации на сервере
Подробнее — в разделе MAX Bridge.
MAX UI
Библиотека готовых UI-компонентов в стиле MAX. Кнопки, модальные окна, списки, формы — все в одном дизайн-коде с мессенджером. Пользователь даже не заметит, что вышел за пределы нативного интерфейса.
<!-- Минимальная структура мини-приложения MAX -->
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://max.ru/js/bridge.js"></script>
<link rel="stylesheet" href="https://max.ru/js/ui.css" />
</head>
<body>
<div id="app">
<h1>Привет, <span id="username"></span>!</h1>
</div>
<script>
// Инициализация MAX Bridge
const bridge = new MaxBridge();
bridge.init().then(data => {
document.getElementById('username').textContent = data.user.first_name;
});
</script>
</body>
</html>initData на своём сервере. Не доверяй
данным с клиента — их можно подделать. Подробнее о
валидации — в разделе
«Валидация данных».
Что дальше?
Теперь, когда ты понимаешь, что такое мини-приложения, переходи к MAX Bridge — там я разбираю, как взаимодействовать с мессенджером из твоего веб-приложения.