Как сделать мобильное приложение из сайта

Превратить сайт в мобильное приложение можно тремя способами: сделать PWA (сайт, который ставится на экран телефона), собрать WebView-обёртку (приложение, внутри которого открывается сайт) или разработать полноценное приложение, которое берёт данные с сайта через API. Для App Store «голая» обёртка почти всегда не подходит: Apple отклоняет её по правилу 4.2. Рабочий вариант для бизнеса: обёртка с нативными функциями или полноценное приложение.

Три способа сделать приложение из сайта

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

1. PWA (Progressive Web App). Это тот же сайт, но с манифестом и сервис-воркером. Пользователь нажимает «Добавить на экран Домой», и на телефоне появляется иконка. В сторы PWA не публикуется, отдельного кода почти нет.
2. WebView-обёртка. Нативное приложение, внутри которого на весь экран открывается ваш сайт. Публикуется в App Store и Google Play, но по сути остаётся браузером с одной вкладкой.
3. Полноценное приложение. Экраны написаны на Flutter, Swift или Kotlin, а товары, цены, заказы и личный кабинет приходят с сайта через API. Работает быстрее, выглядит как «родное» приложение и проходит проверку сторов без споров.

Между вторым и третьим вариантом есть гибрид: основа нативная (вход, каталог, корзина, push), а редкие разделы вроде блога или договора оферты открываются внутри как веб-страницы. Именно так делают многие интернет-магазины: главные экраны быстрые, а второстепенное не стоит денег на переписывание.

Сравнение вариантов: цена, сроки, возможности

Подробнее о плюсах и минусах PWA мы разбирали в статье PWA или нативное приложение.

Почему Apple отклоняет «просто сайт в обёртке»

В правилах App Review есть пункт 4.2 Minimum Functionality. Его смысл: приложение должно содержать функции, контент и интерфейс, которые выходят за рамки переупакованного сайта. Если приложение не полезно, не уникально и не похоже на приложение, ему не место в App Store. Отдельный подпункт 4.2.2 прямо говорит, что приложение не должно быть в основном рекламным материалом, «вырезкой из сайта» или набором ссылок (исключение для каталогов).

На практике отказ выглядит так: вы отправляете сборку, где на весь экран открывается сайт магазина в Алматы, и через день-два приходит письмо с «Guideline 4.2 — Design — Minimum Functionality». Проверяющий открывает приложение, видит мобильную версию сайта, понимает, что Safari делает то же самое, и отклоняет.

Google Play в этом смысле мягче, но и там есть требования к минимальной функциональности, а обёртка без пользы рискует попасть под отказ за спам или низкое качество.

Что добавить, чтобы приложение прошло проверку

Задача не «обмануть» проверку, а дать пользователю то, чего нет в браузере. Вот функции, которые реально меняют решение Apple:

• Push-уведомления о статусе заказа, акциях, записи. Для бизнеса это главный аргумент за приложение вообще. Как это устроено, читайте в статье про push-уведомления в приложении.
• Нативная навигация: нижняя панель вкладок, свайпы назад, нативные экраны входа и профиля, а не меню-гамбургер сайта.
• Вход по Face ID или отпечатку и хранение сессии, чтобы не вводить пароль каждый раз.
• Работа без сети: каталог и история заказов открываются даже в лифте.
• Возможности телефона: камера, сканер штрихкодов, геолокация для выбора ближайшего пункта выдачи, календарь, Apple Pay или оплата через Kaspi.
• Бонусная карта или QR-код на главном экране, который показывают на кассе.

Если приложение содержит регистрацию, Apple требует дать возможность удалить аккаунт прямо в приложении. Об этом часто забывают при переносе сайта, и сборка получает отказ уже по другому пункту.

Как проходит работа: пошагово

1. Аудит сайта. Смотрим, есть ли API, на какой CMS сайт, как устроены корзина, оплата и личный кабинет.
2. Выбор уровня. Решаем, какие экраны делать нативными, а что оставить веб-страницами. Для старта часто хватает MVP с каталогом, корзиной и push.
3. API. Если его нет, дописываем на стороне сайта: товары, остатки, цены, заказы, авторизация.
4. Дизайн. Переносим фирменный стиль, но под мобильные привычки: крупные кнопки, нижнее меню, быстрые фильтры.
5. Разработка и тестирование. Собираем на Flutter сразу под iOS и Android, тестируем на реальных телефонах через TestFlight и закрытое тестирование Google Play.
6. Публикация. Готовим описание, скриншоты, политику конфиденциальности и отправляем на проверку.

Что подготовить до старта работ

Чем больше готово с вашей стороны, тем быстрее приложение попадёт в сторы. Обычно мы просим:

• Доступ к сайту и хостингу или контакт разработчика сайта, чтобы договориться об API.
• Аккаунты разработчика Apple (99 $ в год) и Google Play (25 $ разово), оформленные на компанию. Для Apple юрлицу понадобится номер D-U-N-S, его получение занимает время, поэтому начинайте заранее.
• Логотип и фирменные цвета в исходниках, чтобы иконка и экраны выглядели аккуратно.
• Список сценариев: что клиент должен делать в приложении в первую очередь. Например, для кофейни это меню, заказ навынос и бонусная карта, а не весь сайт целиком.
• Политику конфиденциальности на сайте. Без ссылки на неё приложение не примут ни Apple, ни Google.
• Тестовый аккаунт с заполненными данными для проверяющих сторов, если в приложении есть вход.

Отдельно продумайте оплату. Физические товары и услуги можно оплачивать картой или через Kaspi без комиссии стора. А вот цифровой контент (подписки, курсы, премиум-функции) в App Store и Google Play обычно продаётся через их встроенные покупки: сторы берут 15% или 30% и сами удерживают НДС 16% с продаж в Казахстане.

Частые ошибки казахстанских компаний

• Заказывают обёртку за копейки у фрилансера и получают отказ Apple. Деньги потрачены, приложения в App Store нет, а Android-версия без push ничего не даёт бизнесу.
• Мобильная версия сайта неудобная. Обёртка переносит все проблемы сайта в приложение: мелкие кнопки, всплывающие окна, чат-виджеты поверх корзины.
• Оплата уходит во внешний браузер. Покупатель теряется между приложением и сайтом банка, конверсия падает.
• Нет плана обновлений. Приложение выложили и забыли. Через год Apple и Google поднимают требования к SDK, и выпустить обновление без доработок уже нельзя.
• Аккаунты разработчика оформлены на сотрудника. Когда человек уходит, компания теряет доступ к своему приложению. Как оформить правильно, описано в статье про аккаунт разработчика Apple и Google.

Что выбрать вашему бизнесу

Если нужно быстро и почти бесплатно дать постоянным клиентам иконку на экране, начните с PWA. Если сайт хороший, а бюджет ограничен, подойдёт обёртка с нативными функциями: push, вход по биометрии, бонусная карта. Если приложение станет основным каналом продаж, например доставка в Астане или сеть магазинов с программой лояльности, сразу делайте полноценное приложение: переделывать обёртку потом обойдётся дороже.

Ориентиры по бюджету: MVP от 1 500 000 ₸, бизнес-приложение от 3 500 000 ₸, энтерпрайз с интеграциями от 7 000 000 ₸. Подробный расклад в статье о стоимости разработки мобильного приложения.

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

Можно ли просто завернуть сайт в приложение и выложить в App Store?

Технически можно, но Apple чаще всего отклоняет такие сборки по правилу 4.2: приложение должно давать больше, чем переупакованный сайт. Шансы появляются, когда внутри есть нативные функции: push-уведомления, вход по Face ID, офлайн-режим, камера или сканер.

Сколько стоит превратить сайт в приложение?

Зависит от уровня. Приложение с нативной оболочкой и частью экранов на своих компонентах укладывается в MVP от 1 500 000 ₸, полноценное бизнес-приложение с каталогом, корзиной и оплатой начинается от 3 500 000 ₸. Точную смету мы готовим бесплатно за 24 часа.

Чем PWA хуже приложения из стора?

PWA не попадает в поиск App Store, на iPhone ставится только через меню «Поделиться», а часть системных возможностей работает ограниченно. Зато она дешёвая и обновляется вместе с сайтом.

Сколько времени займёт переделка сайта в приложение?

WebView-оболочка с нативными функциями собирается за несколько недель, полноценное приложение на Flutter с API обычно занимает от двух до четырёх месяцев. Плюс время на проверку в сторах.

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

Для полноценного приложения сайту нужен API: приложение берёт товары, цены и заказы через него. Если сайт на Битриксе, WordPress или своей CMS, API обычно дописывается без переделки самого сайта.

Сделаем приложение из вашего сайта

Посмотрим сайт, скажем, какой уровень вам нужен, и сразу заложим функции, с которыми приложение пройдёт проверку Apple и Google. Опубликуем в сторах от вашего имени. Оставьте заявку на странице контактов или напишите в WhatsApp +7 707 928 13 15, смету пришлём бесплатно за 24 часа. Подробнее о направлении на странице разработки мобильных приложений.