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

Обновлено: 19.09.2024

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

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

В магазине Google Play есть несколько приложений, которые позволяют превращать сторонние веб-сайты в собственные приложения для Android. Сегодня мы будем использовать три из них для нашей демонстрации.

Первое, названное Hermit, вероятно, является самым известным приложением в своем сегменте, а также на сегодняшний день наиболее многофункциональным. Кроме того, мы также будем использовать приложение с открытым исходным кодом под названием Native Alpha, которое необходимо загрузить с Github.

Наконец, мы также покажем вам, как использовать старый добрый Google Chrome, чтобы создавать приложения для Android из веб-сайтов. Итак, без лишних слов, приступим.

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

Например, Instagram не позволяет загружать изображения на свой веб-сайт, а это означает, что созданное вами приложение также будет затруднено.

Приложение 1: Hermit; Developer: Chimbori

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

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

Нажмите на знак «+» на верхней панели, чтобы увидеть всю библиотеку легких приложений.
Теперь прокрутите вниз, чтобы проверить все доступные приложения, и выберите то, которое вам нужно. Я использую Википедию в демонстрационных целях.

Как только вы создадите приложение Wikipedia lite, оно появится на главной странице Hermit (левый снимок экрана ниже), а также будет ярлык на домашней странице телефона (правый снимок экрана ниже). Вы можете нажать на любой ярлык, чтобы запустить свое облегченное приложение.

Чтобы использовать темный режим для недавно созданного облегченного приложения, запустите его и нажмите значок шестеренки (меню настроек) в правом верхнем углу.
Теперь нажмите на опцию Dark Mode в правом нижнем углу выдвижной панели. Приложение перезагрузится во всей своей темной красоте.

Примечание. Не забудьте изменить системную тему на темную («Настройки»> «Дополнительные настройки»> «Тема»> «Темная»), чтобы все страницы настроек и меню отображались в темном режиме.

Вы также можете превратить любой сайт в облегченное приложение для Android с помощью Hermit. Мы используем Beebom в качестве примера, и вот как это сделать:

Введите целевой URL-адрес в строку поиска внизу и нажмите Enter. Как только сайт загрузится, нажмите значок шестеренки в правом верхнем углу.

Веб-приложение Beebom будет добавлено на главный экран Hermit, а также на главный экран вашего устройства, если вы выберете этот вариант на последнем шаге. Вы сможете запустить приложение с любого ярлыка.

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

Приложение 2: Native Alpha; Developer: Cyclonid

По соображениям конфиденциальности вы можете использовать альтернативные веб-просмотры, такие как Bromite, на устройствах с root-доступом. Native Alpha все еще находится на стадии предварительного выпуска и еще не размещена в Play Store. Вы можете скачать его с Github (Бесплатно) и загрузите его на свой телефон Android.

Примечание. Native Alpha совместим только с Android Oreo и более новыми версиями. Разработчик говорит, что поддержка более старых версий находится в разработке, но для этого еще нет ETA.

Примечание. Вы можете создавать упрощенные веб-приложения в любое время, нажав красную кнопку «+» в правом нижнем углу на главной странице приложения.

Приложение автоматически загрузит значок в высоком разрешении, если он есть на веб-сайте. Если нет, нажмите кнопку «Установить пользовательский значок», чтобы добавить значок по вашему выбору из вашей галереи или установленного пакета значков. Нажмите OK> Добавить, когда закончите.

Теперь вы увидите свой новый ярлык приложения Beebom Lite на главном экране вашего телефона, а также на домашней странице Native Alpha.

Native Alpha все еще находится на стадии предварительной версии, но в ней нет некоторых функций Hermit, включая темный режим и полноэкранный интерфейс. Однако существует экспериментальный блокировщик рекламы, который по умолчанию отключен, но его можно включить в настройках.

Native Alpha менее глючит, чем Hermit, а функции, которые он предлагает, более отполированы. Приложение находится в стадии активной разработки, и версия, которую я использовал, v0.85.1, была выпущена 30 января 2021 года. Так что будем надеяться, что разработчик добавит другие интересные функции раньше, чем позже.

Приложение 3: Google Chrome; Developer: Google

Знаете ли вы, что даже Google Chrome для Android позволяет (отчасти) создавать облегченные приложения для многих веб-сайтов?

Совершенно верно, универсальный браузер Google может создавать упрощенные приложения для сайтов, которые имеют встроенный манифест Progressive Web App (PWA). Вот как это сделать:

Откройте Chrome и перейдите на веб-сайт, для которого вы хотите создать ярлык (облегченное приложение). Затем нажмите кнопку меню (три точки) в верхнем левом углу. Наконец, на выдвижной панели выберите «Добавить на главный экран».

Примечание. Это будет работать только в обычных вкладках, но не в режиме инкогнито.

Вы получите возможность ввести имя для ярлыка, прежде чем Chrome добавит его на главный экран.

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

Обратите внимание, что в то время как облегченные приложения, созданные Native Alpha и Hermit, функционируют как автономные приложения (больше похожие на оболочки веб-сайтов), ярлыки, созданные Chrome, работают как вкладка браузера, а не как отдельное приложение.

В любом случае, это по-прежнему отличный вариант, особенно если вам не нужно устанавливать еще одно приложение на свой телефон.

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

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

В этой инструкции мы пошагово покажем как создать аккаунт разработчика, оплатить подписку в Google Play и загрузить приложение, а также распишем требования к тексту, описанию и изображениям. В другой статье мы написали подробную инструкцию по публикации приложения в App Store.

Создание аккаунта

Для того, чтобы опубликовать приложение в Google Play, нужен аккаунт разработчика. Создать его можно с помощью стандартного аккаунта Google.

Если у вас нет стандартного аккаунта гугл, то создать его можно по ссылке .

Далее по ссылке можно завести аккаунт разработчика.

Необходимая часть процесса — внесение разовой оплаты за соглашение разработчика в размере 25$.

После оплаты нужно будет заполнить данные для аккаунта разработчика и завершить регистрацию. После оплаты нужно будет заполнить данные для аккаунта разработчика и завершить регистрацию.

Пользовательское соглашение

Основные положения из Соглашения Google Play о распространении программных продуктов о которых вы должны знать:

вы полностью отвечаете за ваш продукт и поставляемый в нём контент;
вы обязуетесь отвечать на вопросы пользователей в течении трёх рабочих дней и на «срочные вопросы согласно определению Google» в течении 24 часов;
обязуетесь сохранять конфиденциальность и безопасность пользовательских данных;
вы не пытаетесь обманывать, причинять какой-либо вред или вводить в заблуждение пользователя и компанию Google;
вы не распространяете запрещённый контент. Все Продукты, распространяемые через Google Play, должны соответствовать Правилам программы для разработчиков;
вы разрешаете Google возвращать покупателю полную стоимость Продукта или транзакции внутри приложения от вашего имени, если покупатель запрашивает возврат средств в любой момент после покупки. Удаление продукта не освобождает вас от ответственности перед какого-либо рода выплатами;
в целом, Google снимает с себя любую ответственность, связанную с вашим продуктом

Подготовка маркетинговых материалов

К маркетинговым материалам существуют следующие требования:

требования стора. Эти требования монументальны и редко подвержены изменениям, к ним есть четкие описания;
требования, которые возникают из задач проекта: что более актуально для ЦА этого приложения, какой маркетинг у проекта и т.д. Иногда важно, как это видит клиент: некоторые клиенты готовы использовать простые скриншоты и несложные тексты, другие заказчики постоянно меняют своЁ мнение о скриншотах/текстах, и с этим нужно работать.

Для срочных релизов или проверки MVP допускается минимум — сделать маркетинговые материалы, соответствующие требованиям магазина. В других проектах необходимо сделать так, чтобы маркетинговые материалы были максимальным вкладом в успех проекта.

Требования стора к тексту

Требования у Google Play к ним следующие:

название приложения: не более 30 символов;
короткое описание: не более 80 символов;
короткое описание: не более 80 символов;
полное описание не более 4000 символов.

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

Посмотреть полные требования Google Play к тексту и его особенностях можно здесь (Как создать и настроить страницу приложения в Google Play → СВедения о продукте).

Рекомендуем прочитать хорошую статью на тему “Как создать идеальное описание приложения для App Store и Google Play”

Количество скриншотов

Максимальное количество загружаемых скриншотов — восемь штук, а минимальное — два. Сколько скриншотов загружать — вопрос сложный. Все зависит от того, что вам важно показать для пользователя. Иногда можно обойтись и двум мы же рекомендуем сделать не менее 3 скриншотов.

Требования стора к скриншотам

формат JPEG или 24-битный PNG (без альфа-канала);
не менее 320 пикселей;
не более 3840 пикселей;
соотношение сторон не должно превышать 2:1.

Требования Google Play к скриншотам доступны по ссылке .

Советы по выбору скриншотов

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

Полезная статья с рекомендациями по работе с скриншотами для Google Play и App Store. Очень много полезной информации.

Иконка

Иконка — небольшое изображение, идентифицирующее наше приложение среди остальных. Если у вас есть какой-нибудь логотип, то его можно использовать иконкой.

Требования стора к иконке

32-битный PNG (с альфа-каналом) мы делаем всегда без альфа-канала;
размеры: 512 х 512 пикселей;
максимальный размер файла: 1024 КБ

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

Проморолик

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

Требования стора к проморолику

Требования Google Play:

указывайте URL отдельного видео на YouTube, а не плейлиста или канала;
не используйте видео с возрастным ограничением в качестве проморолика;
используйте полную ссылку на видео YouTube вместо сокращенной:

Советы по созданию видео

Видео должны быть короткими (от 30 секунд до 2 минут) и демонстрировать самые привлекательные функции приложения. На устройстве с Android 4.4 или более поздней версии можно записать видео с устройства с помощью команды оболочки ADB screenrecord.

Советы по созданию видео

На картинке для раздела «Рекомендуемые» можно продемонстрировать потенциальным пользователям графические возможности приложения. Это изображение необходимо, чтобы показывать приложение на разных страницах Google Play.

Требования Google Play к баннерам:

JPEG или 24-битный PNG (без альфа-канала);
1024х500 пикселей.

Советы

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

Возрастные ограничения

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

Чтобы установить возрастное ограничение, войдите в Google Play Developer Console и заполните специальную анкету для каждого из своих приложений. Программы, которым не присвоен рейтинг, могут быть заблокированы для отдельных пользователей или стран.

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

Внимание! В анкете давайте правдивые и максимально точные ответы, иначе приложение может быть удалено или заблокировано.

Заполнение анкеты

Войдите в Google Play Developer Console.
Выберите приложение.
В меню слева нажмите Возрастные ограничения.
Прочитайте информацию об анкете и введите свой адрес электронной почты. По этому адресу представители IARC смогут связаться с вами.
Нажмите Продолжить.
Выберите категорию.
Заполните анкету. Если вы указали ответы на все вопросы в разделе и хотите изменить один из них, нажмите Изменить. Чтобы закончить заполнение анкеты позже, нажмите Сохранить проект. Для каждого приложения доступен только один черновик.
Нажмите Определить возрастное ограничение.
Выберите Установить возрастное ограничение на странице с общей информацией об ограничениях.

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

Технические требования к apk-файлу

Размер apk-файла не должен превышать более 100 Мб (и 50 Мб для Android 2.2 и ниже, или для Play Market 5.2 и ниже, но давайте уже про них забудем).
Бывает, что ваше приложение работает на статическом контенте (не делайте так) или является игрой и его размер больше 100 Мб. Такое приложение можно разбиться на части: основная —
до 100 Мб и несколько дополнительных APK Expansion Files до 2 Гб каждый;
apk-файл не должен быть debuggable;
apk-файл должен быть подписан файлом цифровой подписи (см. Обеспечение сборки наличием цифровой подписи).

Обеспечение сборки наличием цифровой подписи

Цифровая подпись необходима для того, чтобы Google Play мог идентифицировать разработчика, и в дальнейшем только этот разработчик мог обновлять/изменять приложение. К тому же, на цифровую подпись завязаны множество сервисов, таких как Facebook SDK, Vk SDK и большинство Google сервисов.

Цифровая подпись помещается в хранилище ключей (файл с расширением .keystore или .jks ). К хранилищу обязаны прилагаться:

store password — пароль к хранилищу ключей;
key alias — название ключа в хранилище;
key password — пароль к ключу.

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

Внимание! Хранилище ключей должно находиться в надежном месте. Если вы потеряете доступ к хранилищу или пароли к нему, то назад пути нет. И даже Google ничем не поможет. Вам придётся опубликовать приложение с новым названием пакета и новым ключом. Кроме того, потребуется обновить описание исходного приложения и закрыть к нему общий доступ. Потеря файла или паролей обернётся для вашего приложения полной трагедией: пользователям придётся удалять текущую версию и скачивать из Google Play новую, а вы потеряете статистику, скачивания, аудиторию и многое другое, ради чего вы столько трудились. В общем, малоприятное событие. (см. п. « Подпись для приложения »)

Хорошей практикой считается подписывать группу своих приложений одной и той же цифровой подписью. Во-первых вы не запутаетесь в них, а во-вторых вы получаете ряд приятных бонусов. Например можно организовать безопасное общение между своими приложениями через Intent, кастомный <user-permission> и его свойство android:protectionLevel=«signature». Но это уже должен знать разработчик.

Настройка оплаты за пользование приложением

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

Смена типа приложения

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

Привязка к Merchant Center

Чтобы указать цену на приложение, вам потребуется привязать свой аккаунт разработчика к Google Payments Merchant Center. Это необходимо для того, чтобы указать налоговые ставки.

Важно: привязку аккаунта к Merchant Center можно произвести только один раз, обратите на это внимание. Если допущена ошибка при привязке Google Payments Merchant Center, то придётся отдавать 25$ за создание нового аккаунта разработчика.

→ Шаги по созданию аккаунта описаны здесь .

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

Особенности работы с налогами в некоторых странах

В случае, если клиент российский, все проще и сложнее одновременно, т.к для клиентов из Аргентины, России, Тайваня, Индии налоговые вычеты осуществляются самостоятельно. Таким образом, мы должны зарегистрироваться как индивидуальный предприниматель и платить налоги с продажи приложения самостоятельно. Исходя из этого, мы включаем в цену приложения ВСЕ налоги, которые впоследствии будем выплачивать сами. Google не будет производить НИКАКИХ отчислений с продажи.

Отчисления Google не производит, но осуществляет операционный сбор в виде 30% с чистой цены. Чистая цена — цена за вычетом всех налоговых сборов.

Пример

Предположим, что цена приложения равна 100 японским иенам, а НДС составляет 20%.

Разработчик перечисляет в соответствующие органы НДС в размере 17 японских иен.

Формула: Цена приложения — (цена приложения * 1/(1 + налоговая ставка))

100 яп. иен — (100 яп. иен * 1/1,2) = 17 яп. иен

Доход разработчика после уплаты операционного сбора в размере 30% и НДС: 58 японских иен.

Формула: цена без НДС * 70%

83 яп. иены * 0,7 = 58 яп. иен

Больше информации о налоговых сборах и правилах Google Play доступны по ссылке .

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

Цена приложения и валюты

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

На странице Цены и распространение укажите нужные страны или установите флажок «Выбрать все».
Посмотреть цену для каждой страны в соответствующем столбце:
— цены для разных стран рассчитываются по текущему обменному курсу с учетом местной специфики ценообразования.
— если местная валюта не поддерживается, для страны действует цена в вашей валюте по умолчанию.

Как владелец приложения мы вправе выставлять цены для каждой страны в соответствии с нашими прихотями. Для этого нужно:

рядом с нужной страной нажмите Изменить;
введите цену;
нажмите Применить.

Обновление цен

Важно: если клиент планирует зарабатывать на приложении как основном источнике дохода, стоит сказать ему о необходимости обновлять цены на приложение в соответствие с курсом валют. Для этого необходимо выставить флажки рядом с нужными странами и нажать Обновить курсы валют на экране «Цены и ценообразование».

Настройка альфа- и бета-тестирования

Альфа- и бета-тестирование позволяет опробовать ваше приложение на узком круге пользователей. Существует открытое и закрытое тестирование. В обоих случаях тестовая группа пользователей не сможет оставлять публичные отзывы в Google Play — только личные, которые не являются общедоступными. В любом случае полезно предложить им дополнительный общий канал для обратной связи. Стоит отметить, что неважно, публикуете вы приложение впервые, обновляете существующее или меняете его описание, изменения будут доступны в Google Play не мгновенно, а только через пару часов.

Подробнее можно посмотреть тут .

Поэтапное внедрение обновлений

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

Крайне рекомендуем не пренебрегать и пользоваться данной возможностью. Для внедрения можно воспользоваться шагами в 10, 25, 50, 75 и 100% и растягивать в соответствии с длиной спринта.

Подробнее можно посмотреть тут .

Поэтапное внедрение обновлений

Если вы готовы опубликовать версию, сделайте следующее:

Более подробно читайте о публикации здесь .

Полезные ссылки

Центр правил разработчиков
Соглашение Google Play о распространении программных продуктов
Возрастные ограничения для игр и приложений
Загрузка приложений
Графические объекты, скриншоты и видео
Публикация приложения
Поэтапное внедрение версии
Пример создания описания приложения
Как провести альфа- и бета-тестировании

Политика обработки персональных данных

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

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

Создайте образец документа с помощью конструктора , при необходимости скорректируйте, разместите текст на отдельной странице сайта и в форме приема данных поставьте ссылку на эту страницу.

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

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

Зачем создавать из сайта приложение

Мы давно привыкли говорить «веб-приложение», подразумевая под этим простое приложение. Чаще всего приложения похожи по функциональности на обычные мобильные версии сайта, но все-таки есть некоторые отличия. В полномасштабном приложении мы получаем доступ к различным функциям, которые на сайте попросту отсутствуют. Например, это может быть функция встроенных уведомлений, хотя сейчас и такое можно спокойно организовать через браузер.

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

Приложение из сайта – это то, что нужно для хорошего ресурса. Когда пользователь читает что-либо на странице браузера, то он может спокойно перемещаться между вкладками. В приложении такого не будет – таким образом, посетитель с большей вероятностью останется на ресурсе на долгое время.
Мобильные приложения позволяют использовать такие функции, как push-уведомления, повторяющиеся подписки и т.д.
Не стоит забывать и том, что миллионы пользователей ежедневно посещают Google Play и AppStore. Если там будет лежать ваше веб-приложение, то посещаемость сайта может заметно вырасти.

Что для этого нужно?

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

Если самостоятельно сделать его не получается, то надо ли непременно искать программиста? Да, но только тогда, когда нужен высококачественный продукт со своими фишками. В противном случае можно обратиться к онлайн-сервисам, которые выполняют конвертацию сайта в приложение всего за несколько минут. Кроме того, если ваш сайт работает на CMS WordPress, то его можно легко преобразовать в приложение. Сделать это можно с помощью специальных сервисов и плагинов, распространяющихся как в бесплатном, так и платном доступе.

Лучшие сервисы для создания приложения из сайта

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

Подробнее о них мы и поговорим далее – рассмотрим как профессиональные решения, так и более простые.

Tadapp Native

Tadapp Native – это лучшее решение для тех, у кого нет времени ждать. Сервис заверяет, что может создать приложение для Android и iOS всего за 5 минут и бесплатно опубликовать его в Google Play. Единственное, с чем могут возникнуть проблемы, так это с адаптацией сайта. Если ее нет, то конвертация, вероятнее всего, пройдет некорректно.

Особенности:

возможность подключения бесплатных push-рассылок;
личный кабинет позволяет управлять сразу несколькими приложениями;
доступна возможность загрузить собственный экран загрузки приложения, иконки;
есть техподдержка – скорость ответа составляет около 2 часов.

Стоимость: от 890 рублей

Ссылка на официальную страницу: Tadapp Native

Appmaker

Appmaker – сервис с 14-дневным пробным периодом, во время которого пользователю предоставляется возможность создать из сайта полноценное приложение на платформе iOS или Android. Appmaker предлагает 3 варианта создания приложений: на WordPress, c WooCommerce и в виде Web App (веб-версия). На официальном сайте можно найти истории успешных компаний, которые использовали данный сервис.

Особенности:

поддерживает более 2000 различных плагинов;
работа с WordPress и WooCommerce;
пробный период;
круглосуточная поддержка.

Стоимость: от $9.90

Официальная страница: Appmaker

Appverter

Appverter – это профессиональный сервис для тех, кто не хочет тратить свои деньги впустую. Он предлагает пользователям переложить свою проблему на высококвалифицированных специалистов. Всего за $50 можно получить полноценное Android-приложение из сайта; для iOS эта цена возрастает до $100.

Особенности:

быстрая разработка за 1 день;
уникальное приложение – никаких шаблонов;
консультация и поддержка входят в стоимость;
есть тариф со 100% гарантией публикации;
некоторые тарифные планы включают пункт «Публикация под ключ».

Стоимость: от $50

Официальная страница: Appverter

AppPresser: плагин для WordPress

AppPresser – это сервис, позволяющий создавать мобильные приложения для Android и iOS с использованием собственного компоновщика. Хотя сам плагин и является бесплатным, тарифные планы сервиса начинаются от $19 в месяц. Для работы с ним не нужны особые знания в программировании. Если вы хорошо владеете WordPress, то с данным инструментом не возникнет никаких проблем.

Особенности:

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

Стоимость: от $19

Официальная страница: AppPresser

MobiLoud: плагин для WordPress

MobiLoud – это еще одно решение для веб-ресурса, созданного на WordPress. Он очень похож на предыдущий сервис, но здесь есть некоторые отличия. MobiLoud предоставляет несколько «предустановок» приложений, которые можно использовать в зависимости от того, какие функции необходимо реализовать. Второе отличие – стоимость, и она заметно выше.

Особенности:

100% синхронизация приложения с сайтом;
возможность создать приложение менее чем за сутки;
приложение от MobiLoud часто монетизируются;
есть бесплатная демоверсия;
отличная кастомизация.

Стоимость: от $200

Официальная страница: Mobiloud

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

Лучшие сервисы мы рассмотрели, теперь давайте воспользуемся одним из них и попробуем создать приложение на основе веб-сайта. Для примера возьмем сервис Appmaker с бесплатным пробным периодом.

Чтобы сделать приложение, выполним следующее:

Переходим на официальную страницу и на главной выбираем «Get Started for Free».
На отобразившейся странице нам предлагают ввести URL веб-сайта на WooCommerce. Если у вас его нет, то просто введите любой другой адрес – это требуется, чтобы перейти на нужную нам страницу.
Выбираем, на основе чего будет создано приложение. Если сайт не на WordPress или WooCommerce, то жмем «Create web app».
Вам будет предложено зарегистрировать аккаунт – заполняем все нужные поля и идем дальше. В новом окне вводим адрес сайта, который нужно преобразовать, а также указываем свою электронную почту. Затем жмем «Proceed».
В результате перед нами отобразится окно конфигурации. Процесс создания приложения может занять некоторое время – все зависит от веса сайта.

Как только создание приложения будет завершено, будет предоставлена ссылка на скачивание файла. На этом все!

Наверное, все близкие к веб-разработке люди уже наслышаны о Progressive Web App. Ещё бы! Эта технология практически уравняла веб и мобильную разработку с точки зрения распространения продуктов и вовлечённости пользователей.

Иконка приложения есть на главном экране смартфона.
Приложение открывается в отдельном окне.
Приложение отправляет push-уведомления.

И казалось бы, всё прекрасно! Но увы, за 10 с лишним лет мобильной эпохи пользователи слишком сильно привыкли искать приложения в Google Play и App Store. Ломать привычки пользователей — дело неблагодарное, и потому ребята из Google (кстати, Google является разработчиком PWA) решили, что если гора не идёт к Магомеду, то… В общем, совсем недавно, 6 февраля 2019 года, они обеспечили использование Trusted Web Activities для выкладки веб-приложений в Google Play.

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

На входе у нас есть веб-сайт с мобильной вёрсткой:

Первым делом нужно установить расширение Lighthouse в Google Chrome на своём рабочем компьютере. Это инструмент для анализа сайтов в целом и для проверки соответствия стандарту Progressive Web App в частности.

Далее открываем наш сайт, боевой или запущенный локально, и генерируем отчёт для него при помощи Lighthouse:

В разделе Progressive Web App отчёта вы должны увидеть примерно следующее:

Технология service workers позволяет вашему сайту быть online даже тогда, когда сервер недоступен. Это такой посредник между клиентом и сервером, который перехватывает каждый запрос и в случае чего подсовывает данные из кэша в качестве ответа.

Для работы PWA достаточно базовой реализации service worker, которая выглядит следующим образом:

Здесь реализованы обработчики для трёх событий: install , activate и fetch . Как только пользователь откроет сайт, на котором есть service worker, вызовется событие install . Это процедура установки сервис-воркера в браузер пользователя. В её обработчике в массиве urlsToCache вы можете указать страницы сайта, которые будут кэшироваться, включая статику. Затем вызывается activate , которое очищает ресурсы, использованные в предыдущей версии скрипта сервис-воркера. И теперь, когда сервис-воркер успешно установлен, он будет перехватывать каждое событие fetch и искать в кэше запрашиваемые ресурсы, прежде чем идти за ними на сервер.

Чтобы всё это заработало, нужно добавить скрипт для регистрации сервис-воркера в html-файлы. Так как Скорочтец является одностраничным приложением (SPA), то у него один единственный html, который после добавления указанного скрипта выглядит вот так:

Функция navigator.serviceWorker.register('/service-worker.js') принимает в качестве аргумента URL, по которому расположен файл сервис-воркера. Здесь не важно, как именно называется файл, но важно, чтобы он был расположен в корне домена. Тогда областью видимости сервис-воркера станет весь домен, и он будет получать события fetch из любой страницы.

Если сравнивать с предыдущим отчётом, то теперь у нас удовлетворён второй пункт и сайт отвечает 200 даже offline, а также в 5-м пункте мы видим, что сервис-воркер обнаружен, но вот стартовой страницы не хватает. Информация о стартовой странице и не только указывается в Web App Manifest, давайте добавим его!

Манифест предоставляет информацию о нашем приложении: короткое и длинное имя, иконки всех размеров, стартовая страница, цвета и ориентация.

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

Давайте снова проанализируем сайт Lighthouse-ом:

Ура! Теперь у нас не просто сайт, а Progressive Web App! Возможно, вы заметили, что скорость загрузки резко подросла. Это никак не связано с тем, что мы делали, просто я заменил development-сборку React-приложения на production, чтобы отчёт выглядел максимально красиво.

Ну что ж, заходим на сайт из мобильного Chrome и что же мы видим?

Да! Можно открывать шампанское! Добавляем приложение на главный экран:

Бонусом получаем заставку при запуске, которая собирается из указанных в манифесте name, background_color и иконки 512x512 в массиве icons:

К сожалению, цвет текста подбирается автоматически, что в случае Скорочтеца немного ломает стиль.

Ну и само приложение:

1. Предложение об установке на Safari

Поскольку в Apple этого не сделали (надеемся, что пока не сделали), то приходится реализовывать «руками». Получается вот такое:

Реализуется следующим JavaScript-кодом:

2. Отслеживание установок

3. Правильный выбор start_url

Обязательно нужно позаботиться о том, что url всех страниц приложения являются продолжением start_url , указанного в манифесте. Потому что, если вы укажете "start_url": "/app/" , а затем пользователь перейдёт на страницу, скажем, "/books/", то тут же покажет себя адресная строка браузера и весь пользовательский опыт сломается. Кроме того, человек почувствует себя обманутым: думал, что использует приложение, а это замаскированный браузер. И даже theme_color из манифеста, который окрасит интерфейс браузера в ваш фирменный цвет, не спасёт.

В случае Скорочтеца, все страницы, относящиеся к приложению, начинаются с /app/, поэтому таких казусов не возникает.

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

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