Мобильное приложение без нативщиков: React Native, Capacitor или PWA

Фронтенд-команда выпускает мобильное приложение без нативных разработчиков на React Native, Capacitor или как PWA. React Native рисует настоящие компоненты платформы на привычных React и TypeScript, Capacitor упаковывает готовый веб-интерфейс в оболочку, PWA обходится без сторов. Выбор зависит от того, нужен ли доступ к железу телефона и публикация в магазинах.

🧱 Где веб-команда спотыкается на втором месяце

Вторник, склад оптовой компании. Фронтенд-команда второй месяц делает приложение приёмки для кладовщиков. В браузере форма работает без замечаний. В оболочке на складском планшете камера для сканирования штрихкодов открывается через раз, а после сворачивания приложения сессия слетает, и кладовщик с паллетой в руках снова вводит логин.

Разработчики уверенно владеют React, состоянием и вёрсткой. Но у телефона свой жизненный цикл: система усыпляет процесс, разрешение на камеру запрашивается отдельно, пуш должен дойти до закрытого приложения. В браузерной работе ничего этого нет, поэтому причину ищут вслепую, а релиз сдвигается на неделю, потом ещё на одну.

Ставка понятна. Пока приложения нет, приёмка идёт на бумаге, а в 1С остатки попадают вечером вручную. Каждая лишняя неделя означает перепечатанные накладные и расхождения, которые склад с бухгалтерией разбирает при закрытии месяца. Для клиентского приложения цена другая: заказ, который не оформили с телефона, достаётся тому, чьё приложение уже стоит на экране.

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

🔀 Четыре пути для команды, которая пишет на вебе

PWA: сайт, который ставится на экран

Самый дешёвый старт. Команда пишет адаптивный веб-клиент, добавляет манифест и service worker, а пользователь ставит иконку на главный экран. Камера и геолокация работают через браузер. На iPhone пуш-уведомления доходят только до PWA, добавленной на экран «Домой» (начиная с iOS 16.4), а фоновые задачи Safari ограничивает жёстко. В магазинах PWA без оболочки нет.

Capacitor: готовый веб-код в оболочке

Ваш фронтенд запускается внутри WebView, а плагины открывают доступ к камере, файлам и пушам. Приложение попадает в RuStore и App Store. Если готового плагина нет, его пишут на Swift и Kotlin, и здесь нативные знания всё равно понадобятся, пусть и в небольшом объёме.

React Native с Expo: нативные экраны на React

Команда пишет на React и TypeScript, а на выходе получает настоящие компоненты iOS и Android, а не веб-страницу в рамке. Expo берёт на себя настройку проекта и сборку, для большинства задач есть готовые модули. Придётся привыкнуть к другим примитивам: вместо div и CSS появляются View и StyleSheet, вместо роутера по URL навигация со стеком экранов. Язык и менеджер пакетов остаются прежними, поэтому это учится по ходу проекта.

Flutter: быстро, но язык новый

Flutter отрисовывает интерфейс собственным движком и требует Dart. Веб-код не переиспользуется, команда фактически осваивает новый стек. Без причин выбирать его именно для веб-команды дороже остальных вариантов.

Короткое правило. Внутренний инструмент с камерой, офлайном и пушами собирайте на React Native с Expo. Клиентскую витрину, у которой веб-интерфейс уже есть и функций железа немного, быстрее выпустить на Capacitor. Если магазины не нужны, хватит PWA. Flutter берите, только когда команда сама хочет Dart.

🧪 Заблуждение: если открывается на телефоне, это уже приложение

Самая дорогая ошибка при выборе Capacitor или PWA: принять мобильную версию сайта за приложение. На новом флагмане интерфейс летает, а на старом складском планшете тот же экран с длинным списком товаров листается рывками. Тестировать нужно на тех устройствах, которые будут у пользователей, а не на телефонах разработчиков.

Отдельная история с сетью. Торговый представитель в подвале магазина или кладовщик в дальнем углу склада работают без связи. Для сайта потеря сети означает ошибку загрузки. Приложению нужны локальная база, очередь отправки и правила разрешения конфликтов при синхронизации. Это вопрос архитектуры, и ни одна из четырёх технологий не решает его за вас.

Есть и магазины. Правило 4.2 App Store Review Guidelines требует от приложения функциональности сверх сайта, поэтому оболочка, которая открывает страницу в рамке, получает отказ. Приложение должно использовать то, чего у сайта нет: камеру, пуши, локальное хранилище, офлайн-режим. RuStore тоже проверяет приложения перед публикацией, так что рассчитывайте время на модерацию и повторные отправки.

🛠 Порядок работ от репозитория до RuStore

1. ✓Выпишите сценарии, без которых приложение не нужно, и выберите самый «железный»: сканирование, работу без сети или пуш при закрытом приложении.
2. ✓Соберите прототип только этого сценария на выбранной технологии, без дизайна и навигации. Если он не заработал за первые дни, технологию меняют сейчас, а не после трёх месяцев разработки.
3. ✓Вынесите логику на API. Нужна авторизация токенами с обновлением и версионирование методов: старые версии приложения остаются у пользователей месяцами, потому что обновляются не все сразу.
4. ✓Настройте сборку. Android-версия собирается на любой машине, для iOS нужен macOS с Xcode: собственный Mac или облачная сборка.
5. ✓Заведите аккаунты разработчика в RuStore и у Apple в первую неделю. Сроки в этих процессах от вас не зависят, и узнавать об этом перед релизом поздно.
6. ✓Проверьте персональные данные. По 152-ФЗ базы с данными граждан РФ хранятся на территории России. Это касается не только бэкенда, но и SDK аналитики, пушей и отчётов о сбоях, если они собирают персональные данные.
7. ✓Прогоните закрытое тестирование на реальных устройствах, включая самые старые из тех, что есть у сотрудников или клиентов.

💼 Что делаем мы и сколько это стоит

У веб-команд узкие места повторяются: нативный модуль, обмен с учётной системой, публикация в магазинах. Интерфейс и бизнес-логику они обычно пишут сами. Поэтому мы работаем в двух форматах.

Первый: делаем разработку мобильного приложения целиком, от выбора технологии до публикации в RuStore и App Store. Такой проект стоит от 500 000 ₽. Второй: подключаемся к вашей команде и берём то, чего ей не хватает, то есть нативные модули, сборку под iOS, публикацию и обмен с 1С. Интерфейс остаётся за вашими разработчиками, а смета считается только по нашей части.

Если приложению нужны данные из 1С (остатки, цены, заказы), основная работа лежит не в интерфейсе, а в обмене. Интеграция приложения с 1С решает именно эту часть: данные из базы доходят до телефона, а документы с телефона попадают в базу без ручного ввода. Для заказов от клиентов есть отдельный сценарий, B2B-приложение с 1С: покупатель видит свои цены и остатки, оформляет заказ с телефона, а менеджеру не приходится перепечатывать заявку.

Опишите сценарии и устройства, на которых приложение будет работать. Мы скажем, хватит ли вам React Native или нужен нативный модуль, и назовём срок и смету. Ориентиры по стоимости собраны на странице цены и тарифы.

❓ Частые вопросы

Можно ли сделать мобильное приложение силами веб-разработчиков?

Можно, если выбрать подходящий инструмент. React Native с Expo позволяет писать на React и TypeScript и получать нативные экраны, Capacitor упаковывает готовый веб-интерфейс. Нативные знания понадобятся точечно: для нестандартных модулей, сборки под iOS и публикации. Сложные сценарии с камерой, фоном и офлайном стоит проверить прототипом в первые дни.

Что выбрать для внутреннего приложения склада или выездных сотрудников?

Для сценариев с камерой, работой без сети и пушами при закрытом приложении надёжнее React Native с Expo: компоненты нативные, модулей для сканирования и локальных баз много. Capacitor подойдёт, если веб-интерфейс уже готов и устройства достаточно современные. PWA выбирают, когда публикация в магазинах не нужна и функций железа минимум.

Нужен ли Mac, чтобы собрать приложение для iPhone?

Да, сборка под iOS выполняется только в macOS с установленным Xcode. Варианты два: купить или арендовать Mac и подключить его к вашему процессу сборки либо использовать облачную сборку. Android-версия собирается на Windows, Linux и macOS. Аккаунт разработчика Apple лучше оформить в первую неделю проекта, не перед релизом.

Пройдёт ли в App Store приложение, которое просто открывает сайт?

Скорее всего нет. Правило 4.2 App Store Review Guidelines требует от приложения функциональности сверх обычного сайта, и оболочка со страницей внутри получает отказ. Добавьте то, чего у сайта нет: работу с камерой, push-уведомления, локальное хранилище, офлайн-режим. Так у модерации меньше оснований для отказа.

Сколько стоит разработка мобильного приложения у ukved.ru?

Разработка мобильного приложения у нас стоит от 500 000 ₽. Итоговая цена зависит от числа сценариев, платформ и объёма интеграции, например с 1С. Если у вас уже есть фронтенд-команда, можно отдать нам только нативную часть, сборку и обмен с учётной системой, тогда смета считается по этим работам.