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

Сделать из сайта приложение можно четырьмя путями:

1. Превратить сайт в PWA.
2. Упаковать его в оболочку для магазина.
3. Собрать приложение в конструкторе.
4. Написать нативное приложение с нуля.

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

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

Различие между путями простое. PWA (прогрессивное веб-приложение) устанавливается прямо из браузера. Оболочка упаковывает сайт в приложение для магазина, конструктор собирает такую оболочку без кода, а нативная и кроссплатформенная разработка создаёт интерфейс заново под iOS и Android.

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

Получите бесплатные креативы

В подарок к рекламной кампании разрабатываем материалы в собственной продакшн-студии и тестируем их эффективность.

Получить креативы

Читайте также:

Как сделать мобильное приложение в 2026 году

Зачем сайту приложение и когда хватит мобильной версии

Адаптивная версия сайта открывается в браузере. Приложение запускается как отдельная программа, получает иконку на экране и может присылать push-уведомления, работать без связи, обращаться к камере и геолокации, а также появляться в магазине. Какие из этих возможностей доступны, зависит от выбранного способа. Чем мобильное приложение отличается от сайта в целом, разбирает руководство по мобильным приложениям.

Приложение оправдано в двух случаях: когда пользователи регулярно возвращаются к сервису и когда нужны функции, которых нет у сайта. Если не выполняется ни одно условие, хватит адаптивного сайта или PWA. Опора на существующий сайт сокращает работу, пока приложению хватает того, что умеет сайт; когда нужны сложная логика и функции устройства, интерфейс приходится собирать заново.

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

Егор Трушников

Директор по развитию и стратегическим продуктам в Kокос Group

Рыночную опору для критерия регулярности дают данные опроса RuStore, опубликованные в мае 2026 года: 49 % участников опроса регулярно пользуются только 5–10 самыми нужными приложениями, ещё 26 % — не больше чем 2–3, а магазины, рестораны и программы лояльности 15 % респондентов относят к сервисам «на один раз». Для интернет-магазина или ресторана это повод заранее ответить, почему пользователь станет открывать приложение снова.

Что такое PWA и как сделать из сайта такое приложение

PWA (progressive web app) — приложение на веб-технологиях с пользовательским опытом платформенного приложения: его можно установить из магазина или прямо из браузера, оно может работать без связи, обновлять данные в фоне, получать push и показывать системные уведомления.

Чтобы браузер сам предлагал установить сайт, нужны HTTPS и манифест — файл с описанием приложения. Браузеры на Chromium (Chrome, Samsung Internet, Edge) дополнительно требуют в манифесте name или short_name, иконки 192 и 512 пикселей, start_url, а также display или display_override. Service worker, который отвечает за офлайн-режим, для установки не обязателен. Сама установка зависит от браузера и системы: PWA ставится не только на телефон, но и на десктопе в браузерах на Chromium и в Safari на macOS Sonoma и новее, а Firefox на десктопе установку по манифесту не поддерживает.

Заранее решите, какие сообщения получит пользователь: статус заказа или напоминание вернуться к начатому действию. Разрешение на push стоит запрашивать тогда, когда человек видит пользу. Если подписки есть, а отписки растут, сообщения не совпали с ожиданиями аудитории.

Анастасия Шилова

Руководитель CRM-практики Out of Cloud (Kokoc Performance)

Что PWA умеет на iPhone

На iPhone push работают только у веб-приложений, добавленных на экран «Домой». С iOS и iPadOS 16.4 такое приложение может получать уведомления, если разрешение запрошено в ответ на действие пользователя, например нажатие кнопки подписки. В iOS 26 любой сайт, добавленный на экран «Домой», по умолчанию открывается как веб-приложение, но пользователь может отключить этот режим.

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

Рассказываем и показываем

Кейс: как медийная реклама на Ozon и WB дала 78% трафика

Нарастили присутствие бренда в медийном поле. У нас уже был внушительный опыт работы с охватными кампаниями, поэтому решение напросилось само собой.

Читать кейс

Читайте также:

Что такое PWA-приложение: полный гайд для бизнеса и разработчиков

Приложение из сайта в оболочке на Android и iOS

WebView — компонент Android, который показывает веб-страницы внутри приложения; по умолчанию он только показывает страницу и не содержит адресной строки и кнопок навигации браузера.

Trusted Web Activity (TWA) открывает веб-контент, например PWA, из Android-приложения на полном экране, а страницы отображает браузер пользователя. Приложение и сайт должны принадлежать одному разработчику, это проверяется через Digital Asset Links, то есть файл на сайте, который подтверждает связь с приложением. Проект собирают библиотекой Bubblewrap, а как привязать сайт к приложению через файл assetlinks.json, разбирает блог. TWA работает только на Android.

Capacitor — кроссплатформенная среда, которая запускает веб-приложение на iOS и Android и даёт доступ к нативным SDK (наборам инструментов разработки) через плагины. Её можно добавить в любой существующий современный JavaScript-проект, поэтому она подходит сайтам, собранным на таких технологиях. На iOS Capacitor работает через WKWebView — компонент Apple, который встраивает веб-контент в интерфейс приложения, то есть аналог WebView.

Что проверяют магазины у оболочек

Главный риск оболочки — отказ магазина. Правило 4.2 руководства App Store Review Guidelines требует, чтобы приложение включало функции, контент и интерфейс, выходящие за рамки переупакованного сайта: если оно не особенно полезно, уникально или «app-like», ему не место в App Store. Google Play не допускает приложения, основная цель которых — дать webview сайта без разрешения его владельца; для приложения собственного сайта этот пункт не применяется.

В правилах RuStore запрещено публиковать мобильный сайт в виде самостоятельного приложения без дополнительной функциональности. WebView-приложения допускаются при наличии такой функциональности, например push-уведомлений, офлайн-режима или интеграции с возможностями устройства, и должны восприниматься пользователем как самостоятельное мобильное приложение. Остальные магазины, подходящие для российских разработчиков, собраны в обзоре альтернатив Google Play.

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

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

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

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

Перед оплатой уточните у сервиса:

• кто публикует приложение и на чьём аккаунте;
• что входит в тариф и на каких условиях действует пробный период;
• можно ли получить файл приложения и перейти к другому сервису;
• какие функции устройства и push доступны;
• как собираются и обновляются приложения.

Нативная и кроссплатформенная разработка приложения

Нативное приложение пишется под одну платформу на её основном языке: под Android на Kotlin или Java, под iOS на Swift или Objective-C. Оно даёт доступ к аппаратным функциям устройства и подходит для сложной логики. Сайт остаётся источником данных и дизайна, а интерфейс создаётся заново.

Кроссплатформенная разработка опирается на единую кодовую базу для iOS и Android. Примеры таких фреймворков — React Native, где интерфейс описывается на JavaScript с React-компонентами и при запуске превращается в нативные представления, и Flutter, открытый фреймворк для приложений из одной кодовой базы. Capacitor отличается тем, что берёт готовый веб-код сайта, а React Native и Flutter строят интерфейс заново.

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

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

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

Бюджет ограничивает выбор, но на пригодность способа под задачу не влияет. Стоимость и сроки складываются из объёма функций, числа платформ, push и офлайн-режима, аккаунтов разработчика и публикации, поддержки с обновлениями и дизайна под экраны приложения. Как правило, PWA и конструктор добавляют к сайту меньше новых работ, чем оболочка с собственными функциями, а нативная разработка требует больше всего работ, потому что интерфейс создаётся заново. Ориентиры для расчёта собраны в статье блога о стоимости разработки мобильного приложения.

Сравнительная таблица способов

Таблица сравнивает четыре способа по пути к пользователю, функциям устройства и проверке магазина.

Проверку магазина проходят все способы, кроме установки PWA из браузера.

Порядок вопросов для выбора подхода

Три вопроса помогут выбрать способ для сайта с готовой мобильной версией:

1. Нужно ли приложению то, чего нет у сайта? Если нет, хватит адаптивного сайта или PWA.
2. Нужна ли публикация в магазинах? Если да, подойдёт PWA в упаковке для магазина или оболочка с собственными функциями.
3. Нужны ли сложная логика и аппаратные функции? Если да, выбирайте нативную или кроссплатформенную разработку.

Если магазин не нужен, а push и офлайн нужны, подойдёт PWA с учётом условий iPhone.

Мобильный маркетинг без риска

Гарантируем выполнение KPI

Обеспечиваем рост продаж через приложение

Узнать больше

Читайте также:

Как опубликовать приложение в Google Play: пошаговая инструкция

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

Начните с сайта. Для установки PWA обязателен HTTPS; для любого способа нужны адаптивная вёрстка под телефоны, постоянные адреса страниц, иконка и название под требования выбранной технологии. Размеры иконки и экрана загрузки у каждого сервиса свои, поэтому берите их из его инструкции. Решите, какие разделы сайта нужны в приложении: каталог, корзина, оплата, личный кабинет, поддержка. Остальное можно оставить в браузере.

Путь от выбора способа до релиза состоит из пяти шагов:

1. Выберите способ по вопросам выше.
2. Подготовьте сайт.
3. Соберите приложение: манифест, оболочку, конструктор или нативную разработку.
4. Протестируйте его на устройствах Android и iOS.
5. Опубликуйте в магазине или оставьте установку из браузера.

При тестировании пройдите на обеих платформах сценарии оплаты и авторизации, а для PWA с офлайн-режимом проверьте и поведение при потере связи. Заранее настройте аналитику и составьте список проверок: без них события приложения в отчётах не появятся, и оценить запуск будет нечем.

Как опубликовать приложение в магазинах

Для публикации нужен аккаунт разработчика в соответствующем магазине. По справкам Apple и Google на октябрь 2026 года годовой взнос Apple Developer Program составляет 99 USD, а регистрация в Google Play Console стоит 25 USD единоразово; допустимые карты и регионы зависят от условий платформ. Для личных аккаунтов Google Play, созданных после 13 ноября 2023 года, перед выходом в production нужен закрытый тест: минимум 12 тестировщиков, подписанных непрерывно не менее 14 дней.

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

Что делать после публикации

Публикация — только начало: карточку приложения продвигают как поисковую страницу магазина, и эта работа называется ASO (оптимизация приложения в магазине). Mobisharks, агентство из Kokoc Performance, продвигало в Google Play и App Store приложение известной аптечной сети: пересобрало семантическое ядро, обновило метаданные в разных локалях, наладило работу с отзывами и выводило запросы в топ кластер за кластером. С июня по ноябрь 2025 года по данным AppFollow приложение получило 22 000 загрузок из поиска App Store и 15 313 установок в Google Play, показы в поиске App Store выросли на 233 % (всего 375 000), а средний рейтинг по отзывам вырос на 33 % и достиг 4,01. Результат дал комплекс работ по уже опубликованному приложению, а в кейсе описаны все его этапы.

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

Рудакова Светлана

Руководитель комплексных проектов Kokoc Performance

Продвижение карточки лучше включить в план запуска заранее. Как это делается, описано в руководстве по продвижению приложения в App Store и Google Play.

FAQ по созданию приложений из сайта

Коротко о главном

• Способ выбирают по тому, что приложению нужно сверх сайта, и по требованиям магазинов.
• PWA устанавливается из браузера и не требует магазина.
• Оболочка, которая лишь повторяет сайт, рискует не пройти проверку App Store и RuStore.
• Конструктор не отменяет правил: Apple ждёт отправку от самого поставщика контента.
• Нативная и кроссплатформенная разработка нужны для сложной логики и функций устройства.
• После публикации карточку приложения продвигают как страницу магазина.