Мобильные приложения для 1С-Битрикс
Service Worker на Битриксе — отдельное приключение. Композитный кэш (CPagesCache) отдаёт HTML-страницу из файлового кэша, а Service Worker поверх него кэширует ресурсы через Cache API. Два слоя кэширования, которые ничего не знают друг о друге. Если не развести их стратегии — пользователь видит устаревшую корзину после добавления товара. Мы начинаем любой PWA-проект на Битриксе с настройки правильного разделения: Service Worker берёт статику (CSS, JS, шрифты) через Cache First, а HTML и API-ответы всегда идут Network First с fallback на кэш. Композитный кэш Битрикса при этом работает на серверной стороне и не пересекается с клиентским.
Варианты мобильных решений
PWA (Progressive Web App) — веб-приложение, которое выглядит как нативное, но живёт в браузере. Установка из стора не нужна — добавление на домашний экран.
React Native — кроссплатформа от Meta. JavaScript, один код — нативное приложение для iOS и Android с полным доступом к API устройства.
Flutter — кроссплатформа от Google на Dart. Собственный движок рендеринга Skia, стабильные 60/120 FPS.
Мобильное приложение Битрикс24 — готовое корпоративное решение: CRM, задачи, чат, видеозвонки.
| Критерий | PWA | React Native | Flutter |
|---|---|---|---|
| Стоимость | Низкая | Средняя | Средняя |
| Запуск | 1-3 недели | 2-4 месяца | 2-4 месяца |
| App Store / Google Play | Нет* | Да | Да |
| Push | Да (iOS 16.4+) | Да | Да |
| Офлайн | Базовый | Полный | Полный |
| Камера, GPS | Ограничено | Полный | Полный |
| Производительность | Средняя | Высокая | Высокая |
*PWA можно обернуть в TWA для Google Play.
PWA для 1С-Битрикс: детали реализации
PWA — самый быстрый способ дать мобильное присутствие. Минимальные затраты, максимальная отдача на старте.
manifest.json — иконка, название, display: standalone, theme_color, start_url. Пользователь «устанавливает» сайт на домашний экран. Файл кладём в корень и подключаем через <link rel="manifest"> в header.php шаблона.
Service Worker — ядро PWA. Регистрируем в footer.php:
- Cache First для статики:
/bitrix/cache/, CSS, JS, шрифты, изображения товаров - Network First для HTML и API (
/ajax/,/bitrix/services/). Если сеть недоступна — отдаём кэш. - Stale While Revalidate для каталога — показываем кэшированное, обновляем в фоне
- Отдельная логика для корзины: всегда Network Only, иначе пользователь видит фантомные товары
Ключевой нюанс — конфликт с композитом Битрикс. Модуль composite кэширует HTML на сервере и отдаёт статические файлы. Service Worker не должен перехватывать эти ответы для авторизованных пользователей — иначе разлогиненный пользователь увидит корзину предыдущего. Решаем через проверку cookie BX_USER_ID в fetch-обработчике.
Push-уведомления — Firebase Cloud Messaging или OneSignal. Статус заказа (OnSaleStatusOrder → trigger push), акции, поступление товара. Токен устройства сохраняем в UF-поле пользователя.
Офлайн-каталог — ранее просмотренные товары доступны без интернета. IndexedDB для карточек, Cache API для изображений.
Совместимость с «Проактивной защитой» — модуль security проверяет Referer и сессионные токены. Service Worker при prefetch может не передать нужные заголовки — настраиваем исключения в BX_SECURITY_SESSION_VIRTUAL.
React Native для 1С-Битрикс
Когда PWA мало — React Native даёт полноценное нативное приложение с единой кодовой базой.
Архитектура:
- Бекенд: Битрикс отдаёт данные через REST API. Стандартные методы
catalog.product.list,sale.order.addдля каталога и заказов. Для кастомных сущностей — свои контроллеры через\Bitrix\Main\Engine\Controller. - Промежуточный слой: BFF (Backend for Frontend) на Node.js или GraphQL. Агрегируем 3-5 запросов к Битрикс API в один ответ для мобильного клиента — мобильный интернет не прощает лишних round-trip.
- Фронтенд: React Native приложение.
Функционал интернет-магазина:
- Каталог: поиск, фильтры, сортировка — данные из
CIBlockElement::GetListчерез REST - Карточка товара: галерея (react-native-fast-image), описание, характеристики, отзывы
- Корзина и чекаут с persistence через AsyncStorage
- Личный кабинет: заказы, избранное, профиль, адреса
- Push: статус заказа, акции, брошенная корзина — FCM/APNs, триггеры на событиях Битрикс
- Нативные фичи: сканер штрихкодов (react-native-camera), геолокация для ПВЗ, Face ID / Touch ID (react-native-biometrics)
- Офлайн: каталог и избранное через AsyncStorage / WatermelonDB
- Deep linking:
react-navigationdeep link → конкретный товар из push или рекламы
Почему React Native:
- React-разработчики уже знают 80% того, что нужно
- Экосистема: тысячи готовых пакетов в npm
- Hot Reload — моментальный feedback при разработке
- CodePush от Microsoft — обновление JS-бандла без публикации в Store. Фикс бага за минуты, а не за 2-3 дня ревью.
Flutter для 1С-Битрикс
Альтернатива React Native. Выбираем, когда нужен нестандартный UI с тяжёлыми анимациями.
Сильные стороны:
- Skia engine — 60/120 FPS на сложных анимациях, где React Native начинает подлагивать на bridge
- Пиксельная идентичность на iOS и Android — свой рендеринг, не платформенные виджеты
- Dart: строго типизированный, ошибки на этапе компиляции, а не в проде на устройстве пользователя
- Material Design и Cupertino виджеты из коробки
Когда Flutter:
- Интерфейс со сложными анимациями и кастомными переходами между экранами
- Критически важна одинаковость UI на обеих платформах
- Планы на web и desktop (Flutter поддерживает все три таргета)
- Команда знает Dart или готова вложиться
Интеграция с Битрикс:
- REST API на стороне Битрикс (аналогично React Native)
- Пакет
dioдля HTTP с interceptors: автоматическое добавление auth-токена, retry на 5xx - Состояние:
RiverpodилиBLoC— зависит от масштаба - Локальное хранение:
Hiveдля key-value,sqfliteдля сложных запросов к офлайн-данным
Мобильное приложение Битрикс24
Для корпоративных задач — готовое решение, не нужно писать с нуля:
- CRM: сделки, контакты, компании — в кармане
- Задачи и проекты — создание, трекинг на ходу
- Корпоративный мессенджер + видеозвонки
- Диск — файлы под рукой
- Кастомизация через REST API Б24: свои разделы, виджеты, кастомные CRM-карточки через
placement
API для мобильных приложений
Мобильное приложение ровно настолько хорошо, насколько хорош API.
Проектирование:
- RESTful с версионированием (
/api/v1/,/api/v2/) — обратная совместимость при обновлениях - JWT + refresh token. Access — 15 минут, refresh — 30 дней. Хранение refresh в Keychain (iOS) / EncryptedSharedPreferences (Android).
- Пагинация курсором (
?after=eyJ...) — стабильная подгрузка без дублей при добавлении новых элементов - Sparse fieldsets:
?fields=id,name,price,image— отдаём только нужное экрану, экономим трафик
Оптимизация под мобильные сети:
- Агрегированные эндпоинты: один запрос на экран вместо пяти.
/api/v1/homeвозвращает баннеры, рекомендации, акции и категории одним ответом - Gzip-сжатие — в Битрикс включается через
\Bitrix\Main\Config\Option::set('main', 'use_compression', 'Y') - ETag / Last-Modified — 304 Not Modified экономит трафик и время
- Retry с exponential backoff + offline queue (запросы копятся и отправляются при восстановлении сети)
- Изображения по размеру устройства:
CFile::ResizeImageGet()с параметрами из заголовкаDPR
Push-уведомления:
- FCM (Android) + APNs (iOS)
- Триггеры на событиях Битрикс:
OnSaleStatusOrder,OnCatalogStoreProductUpdate,OnSaleBasketSaved - Сегментация: персонализация по поведению из CRM
- Аналитика воронки: доставка → открытие → переход → конверсия
Сроки
| Задача | Сроки |
|---|---|
| PWA для существующего сайта | 2-4 недели |
| REST API для мобильного приложения | 3-6 недель |
| MVP на React Native / Flutter | 2-3 месяца |
| Полнофункциональное приложение | 4-6 месяцев |
| Публикация в App Store / Google Play | 1-2 недели |
| Кастомизация приложения Б24 | 2-4 недели |
Рекомендуем стартовать с PWA — проверить гипотезу за 2-3 недели. Если мобильный трафик подтверждает спрос — наращивать нативное приложение с полным доступом к устройству.







