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

Как из сайта сделать приложение, зависит от того, что вы хотите получить: иконку на главном экране телефона, место в магазине приложений или полноценное приложение с push-уведомлениями, офлайн-режимом и доступом к камере. Путей три: PWA (сайт, который устанавливается как приложение), обертка WebView (нативная оболочка, внутри которой открывается сайт) и отдельная разработка под iOS и Android. Они отличаются ценой, сроками и тем, что в итоге увидит пользователь.

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

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

Превратить сайт в приложение можно на разной глубине. Чем глубже, тем больше возможностей и тем дороже поддержка. Ниже три варианта по возрастанию сложности.

PWA: сайт, который ставится на телефон

PWA (Progressive Web App, прогрессивное веб-приложение) - это сайт с тремя добавками. Файл манифеста описывает название, иконку, цвет и режим запуска без адресной строки браузера. Service worker (скрипт, который работает в фоне без интерфейса) кеширует страницы и данные, чтобы приложение открывалось быстро и частично работало без сети. Третье условие - HTTPS. Когда все это есть, сайт можно установить на главный экран, и он запускается в отдельном окне, как обычное приложение.

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

WebView: сайт в нативной оболочке

Второй путь - упаковать сайт WebView-оберткой. WebView - встроенный компонент операционной системы, который показывает веб-страницы внутри приложения. Разработчик создает минимальное нативное приложение, и внутри него загружается ваш веб-сайт. Такую оболочку собирают на Capacitor, Apache Cordova или React Native с компонентом WebView. Получается приложение, которое можно отправить в магазины, подключить к нему push-уведомления через системные механизмы и дать доступ к части функций телефона.

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

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

Третий путь - сделать мобильное приложение заново, а сайт использовать как источник данных. Нативное приложение пишут на Swift для iOS и Kotlin для Android. Кроссплатформенное собирают на React Native или Flutter: один код на Android и iOS, интерфейс при этом остается быстрым. Серверная часть и база данных общие с сайтом, приложение получает данные через API.

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

Как веб-сайт сделать приложением на айфон?

Для владельца айфона есть способ без всякой разработки. Откройте сайт в Safari, нажмите кнопку Поделиться и выберите пункт На экран Домой. Иконка встанет на главный экран рядом с остальными приложениями. Если на сайте настроен манифест, он откроется в отдельном окне без адресной строки. Если нет, получится обычная закладка, которая запускает браузер.

Для бизнеса важны ограничения iOS. Система не показывает автоматического предложения установить PWA, поэтому пользователю нужна подсказка на самом сайте: небольшой баннер с инструкцией из двух шагов. Push-уведомления для веб-приложений на iOS работают начиная с версии 16.4 и только у сайтов, добавленных на главный экран. Хранилище ограничено, фоновой работы почти нет, часть функций устройства недоступна.

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

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

На Android установка PWA проще. Большинство популярных браузеров сами предлагают установить сайт, если у него есть манифест, service worker и HTTPS. Пользователь нажимает Установить во всплывающем окне или в меню браузера и получает иконку на главном экране. Сайт может показать свою кнопку установки в удобный момент, например после первого заказа.

Push-уведомления в PWA на Android приходят через браузер, добавлять сайт на главный экран для этого не обязательно. Для публикации в магазинах PWA можно упаковать через Trusted Web Activity (технологию, которая показывает сайт на весь экран внутри приложения без элементов браузера). Для российской аудитории стоит подумать и о RuStore: там свои правила размещения, и их проверяем до сборки.

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

Если вам самим нужно удобно открывать сайт, хватит иконки на главном экране: на iOS через Поделиться, на Android через меню браузера. Если вы владелец сайта и хотите, чтобы так делали клиенты, нужны мобильная версия сайта, которая удобна на маленьком экране, манифест с иконками и service worker. Технически это и будет PWA. PWA на неудобном сайте ситуацию не спасет: человек установит его один раз и больше не откроет.

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

Что пропустит модерация App Store

Модераторы оценивают, дает ли приложение что-то сверх сайта. Ориентироваться можно так:

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

Правила меняются, поэтому перед сборкой мы сверяемся с текущей редакцией требований Apple и магазинов Android. Подробнее о подготовке к публикации мы рассказываем в статье о сторах.

Как выбрать способ

Если сайт хороший и задача в повторных визитах, начинайте с PWA. Если нужен стор и есть бюджет на нативные функции, берите обертку. Если приложение и есть продукт, делайте отдельное.

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

Порядок работ у нас такой:

1. Аудит сайта: мобильная версия, скорость, есть ли API, как устроены вход и оплата.
2. Цели: что приложение должно дать бизнесу, какие метрики смотрим после запуска.
3. Выбор пути: PWA, обертка или отдельная разработка, с объяснением, почему именно так.
4. Дизайн экранов под телефон, если приложение отличается от сайта.
5. Разработка и подключение push-уведомлений, аналитики, оплаты.
6. Тестирование на iOS и Android, на старых и новых моделях.
7. Публикация в сторах, если она нужна, и поддержка.

На наших демо-проектах выбор выглядел бы по-разному. Грядке, интернет-магазину фермерских продуктов, для старта хватит PWA с push-уведомлениями о скидках. Капиталике, финансовому сервису, нужно нативное приложение: вход по биометрии и требования к безопасности обертку не прощают. Трассеру, логистическому сервису, нужна геолокация курьера в фоне, а это возможно только в отдельном приложении. Это демонстрационные проекты студии, на них мы показываем логику выбора.

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

Что проверить на сайте до начала работ

• Мобильная версия сайта. Если на телефоне неудобно, приложение на той же верстке будет таким же.
• API. Отдельному приложению нужен доступ к каталогу, корзине, заказам и профилю. Если API нет, его делают первым этапом.
• Вход. Пароль и почта на телефоне неудобны, лучше вход по номеру или через сервисы, к которым привыкла аудитория.
• Оплата. Проверьте, как платежная страница открывается внутри приложения и возвращает пользователя обратно.
• Контент. Кто и где будет обновлять баннеры, акции, тексты для приложения.
• Аналитика. События на сайте и в приложении должны считаться одинаково, иначе вы не сравните каналы.

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