как преобразовать сайт в приложение
Как превратить веб-сайт в мобильное приложение с помощью 7 строк JSON
В материале, перевод которого мы публикуем сегодня, речь пойдёт о создании мобильных приложений на базе существующих веб-проектов. Автор этой статьи демонстрирует инструменты, которые позволяют с минимальными усилиями разрабатывать приложения, пользующиеся нативными возможностями платформ iOS и Android и включающие в себя материалы работающих сайтов или локальные ресурсы. Его рассказ начинается с тех самых семи строк JSON-кода, которые позволяют превращать сайты в мобильные приложения.
Превращение веб-сайта в мобильное приложение
Обзор
На рисунке выше показан код, который позволяет превратить веб-сайт в мобильное приложение. В частности, за «превращение» отвечают семь строк JSON, выделенные оранжевым цветом. Оставшиеся фрагменты текста программы описывают возможности, относящиеся к мобильной платформе, на которой выполняется приложение.
Что, если я скажу вам, что для того, чтобы воспользоваться этим подходом, не нужно переделывать сайт, пользуясь неким фреймворком, приближающим внешний вид ресурса к виду мобильного приложения? Более того, что если весь процесс разработки заключается в подключении сайта к мобильному приложению, подобному показанному выше, с помощью обычного URL?
Кроме того, вот ещё один вопрос: «Можно ли, просто редактируя JSON, работать с нативными API, с компонентами пользовательского интерфейса, пользоваться системными переходами между страницами?».
Пока вы размышляете над ответами на эти вопросы, предлагаю взглянуть на то, как выглядит и работает минимальное приложение, созданное с использованием инструментов, о которых я хочу здесь рассказать.
Обратите внимание на то, как я встроил в это приложение страницу с github.com, однако всё остальное — это нативные компоненты, вроде верхней навигационной панели и нижней панели управления. При этом переходы между страницами приложения используют системные возможности. Делается это автоматически и не требует вмешательства в код сайта.
Прежде чем я расскажу о том, как это сделано, у вас может возникнуть вполне резонный вопрос: «Всё это хорошо, но можно ли, пользуясь методом, о котором идёт речь, создать что-то действительно полезное, а не нечто вроде простого «просмотрщика» веб-страниц в контейнере нативного приложения?».
Отличный вопрос. Собственно говоря, ответу на него и посвящена данная статья. Если в двух словах, то суть рассматриваемой здесь методики заключается в создании двустороннего канала связи между контейнером для вывода веб-содержимого и приложением. Приложению это даст возможность вызывать JavaScript-функции, находящиеся в контейнере, а контейнеру позволит обращаться к нативным API, расположенным за его пределами.
Взглянем на пример, иллюстрирующий вышесказанное.
Приложение для создания QR-кодов
Вот основные составные части этого приложения:
И, наконец, обратите внимание на то, что тут показано и взаимодействие компонентов приложения. А именно, QR-код меняется после ввода новых данных. Делается это благодаря возможности вызова JavaScript-функции, расположенной внутри веб-приложения, которая отвечает за создание QR-кодов на основе переданных ей данных.
Надо отметить, что ни один из фреймворков для разработки мобильных приложений не пытался фундаментально решить проблему «прозрачной интеграции веб-контейнеров в нативные приложения», так как все они либо полностью ориентированы на системные возможности мобильных платформ, либо целиком полагаются на HTML5.
Когда говорят о будущем мобильных приложений, обычно всё крутится вокруг вопроса о том, какой из подходов победит: основанный на HTML5 или на нативных API. Что характерно, в подобных рассуждениях не поднимается тема сосуществования этих двух подходов, и, более того, не рассматривается эффект синергии, который, благодаря совместному использованию различных технологий, позволит достигать результатов, которые нелегко достигнуть, полагаясь лишь на что-то одно.
В этом материале я собираюсь рассказать о следующих вещах:
Зачем использовать веб-технологии в мобильных приложениях?
Прежде чем продолжать, давайте сначала поговорим о том, нормально ли это — использовать возможности HTML и JS в мобильных приложениях, и о том, когда может пригодиться подобный подход. Вот несколько ситуаций, когда смешивание веб-технологий с нативными возможностями мобильных платформ может оказаться кстати.
▍1. Использование технологий, созданных для веб
Для реализации некоторых частей приложений может иметь смысл использование веб-технологий. Например, WebSocket — это технология, изначально ориентированная на веб. Для её использования можно применить встроенный в мобильную платформу веб-движок ( WKWebView для iOS и WebView для Android) вместо установки сторонней библиотеки, которая попросту «эмулирует» WebSocket.
При таком подходе не нужно использовать дополнительные библиотеки, достаточно, применяя стандартные технологии, делать то, что нужно. Это ведёт нас к следующей ситуации.
▍2. Уменьшение размеров пакета приложения
Использование веб-технологий в мобильных приложениях помогает делать то, что без этих технологий потребовало бы огромных сторонних библиотек.
Например, для того, чтобы встроить в мобильное приложение генератор QR-кодов, понадобится сторонняя библиотека, которая увеличит размер пакета приложения. Однако если применить для этого стандартное средство для просмотра веб-страниц и JS-библиотеку, подключённую к странице с помощью простой конструкции
Конвертируем сайт в приложение за 3 мин.
Перевести сайт в мобильное приложение можно двумя способами. Первый способ, это установка среды разработки «Android Studio», к ней же понадобится установить дополнительные пакеты и Java SDK. Всё это занимает не один ГБ, требует достаточно мощный компьютер и самую малость знаний программирования.
Второй способ воспользоваться онлайн сервисом и сделать конвертацию сайта в приложение за 3 минуты без каких-либо программ и программирования. Этот способ я сегодня и покажу Вам. Кстати, сайт делает сразу 2 версии: под IOS и Android.
Онлайн конвертация
Первый раз, я встретил сайт «GoNative» несколько лет назад. Тогда все аналоги были платные и этот меня приятно удивил. Я сделал себе приложение с любимым онлайн кинотеатром для Андроид ТВ Бокса. Недавно, мне понадобилось опять за пару минут сделать приложение из сайта и найти этот сайт оказалось проблемой, а все аналоги по-прежнему платные. Всё же я его нашел, теперь хочу поделится с вами и показать, как произвести конвертацию.
Чтоб получить приложение, делаем следующее:
По большему счету, если Вам приложение необходимо только для личного использования, достаточно заполнить первые 3 поля: 1 — адрес сайта; 2 – название приложения; 3 – почта, на которую придет приложение.
Собственно, больше рассказать нечего. Ваше приложение готово к установке на любое устройство. Если есть какие-то вопросы – всегда отвечу в комментариях!
Как превратить сайт в приложение или что такое Progressive Web Application (PWA)
Если вы часто или циклично взаимодействуете через сайт со своими клиентами, партнерами или коллегами, то наверняка задумывались о создании мобильного приложения.
Но зачастую разработка приложения — это дорого и долго. К тому же продвигать и поддерживать его также затратно. Поэтому многие откладывают создание приложения до лучших времен.
А что, если превратить в приложение уже имеющийся сайт? Это возможно с помощью технологии Progressive Web Application или PWA.
Благодаря PWA пользователи могут установить сайт себе на смартфон: работать он будет как мобильное приложение, а на экране телефона появится иконка для быстрого доступа. Также PWA-сайт можно установить как приложение на десктоп.
Progressive Web Application – это гибрид сайта и приложения. Создать его можно как с нуля, так и на основе существующего сайта.
О преимуществах и недостатках этой технологии для бизнеса рассказывает маркетолог студии «Иквадарт» Татьяна Гаврилова.
Работает без интернета. Даже в офлайне пользователи могут читать контент и отправлять формы. Данные из формы сохранятся и поступят на сервер, когда у пользователя появится интернет-соединение.
PWA может отправлять push-уведомления. Таким образом можно привлекать внимание к своему бренду, возвращать пользователей на сайт, стимулировать повторные продажи.
Шаг 1: Пользователь открывает сайт в браузере и соглашается сохранить его на главный экран.
Шаг 2: На рабочем столе устройства появляется иконка для быстрого доступа. Теперь сайт доступен пользователю всего в один клик.
Шаг 3: Сайт открывается без интерфейса браузера и выглядит как мобильное приложение.
Многие известные сайты уже имеют функциональность PWA. Например, twitter.com, web.telegram.org, aviasales.com, unsplash.com. Пример PWA-сайта для малого бизнеса: myclean.by. Откройте любой из этих сайтов в мобильном браузере Chrome, чтобы протестировать, как работает PWA.
Заметили, что для установки PWA-сайта не понадобилось заходить в App Store или Google Play? В отличие от мобильного приложения, PWA не нужно регистрировать в магазинах приложений.
PWA не нужно регистрировать в App Store и Google Play
Для бизнеса это означает экономию. Во-первых, не нужно платить App Store и Google Play за размещение; во-вторых продвигать и поддерживать PWA дешевле, чем мобильное приложение.
Пользователю же не нужно идти в магазин приложений, чтобы оттуда скачать PWA.
При этом PWA можно добавить в Google Play с помощью функции TWA (Trusted Web Activities), а значит сайт получает дополнительную площадку для распространения.
PWA можно добавить в
Google Play
Конечно, для некоторых бизнесов PWA не может стать полноценной заменой мобильному приложению. Возможностей у нативного мобильного приложения больше.
Но если вам достаточно перечисленных выше преимуществ, PWA-сайт может стать для бизнеса хорошей и значительно более дешевой альтернативой приложению.
Кроме стоимости разработки, у PWA есть еще несколько плюсов в сравнении с нативным мобильным приложением:
PWA весит значительно меньше мобильного приложения
В первую очередь, PWA подойдет компаниям, чьими услугами клиенты пользуются часто или с определенной периодичностью, например, раз в месяц. Так, PWA принесет пользу сервису доставки еды, салону красоты, клининговой компании, интернет-магазину. Также PWA подойдет онлайн-медиа.
PWA подойдет
интернет-магазину, сервису доставки еды, онлайн-медиа
Многие бренды уже воспользовались возможностями PWA и вот каких результатов они достигли:
BMW: в 3 раза увеличилась скорость загрузки сайта.
Lancôme: на 17% увеличилась конверсия сайта, и на 84% снизилось время загрузки сайта на смартфонах.
Больше примеров того, как бренды используют PWA, вы сможете найти здесь:
Конечно, у PWA есть и недостатки. Например, есть ряд ограничений на iOS:
К другим недостаткам можно отнести то, что у PWA есть ограничения в работе с железом. Например PWA еще не научилось работать со сканером отпечатков пальцев, датчиками приближения, ограниченно работает с Bluetooth.
Сравнить PWA с мобильным приложением и сайтом вы можете с помощью таблиц ниже.
3 способа превратить любой сайт в приложение для Android
Установка слишком большого количества приложений на телефон не только замедляет его работу, но и снижает расход заряда аккумулятора. Многие приложения также запрашивают инвазивные разрешения, что делает их кошмаром конфиденциальности.
Один из способов избежать всего этого — запустить браузер и использовать веб-сайты вместо приложений, но это не всегда очень эффективное решение.
Итак, сегодня мы покажем вам, как вы можете превратить практически любой веб-сайт в собственное приложение для Android с полной функциональностью, включая темный режим, полноэкранный интерфейс и многое другое.
В магазине Google Play есть несколько приложений, которые позволяют превращать сторонние веб-сайты в собственные приложения для Android. Сегодня мы будем использовать три из них для нашей демонстрации.
Первое, названное Hermit, вероятно, является самым известным приложением в своем сегменте, а также на сегодняшний день наиболее многофункциональным. Кроме того, мы также будем использовать приложение с открытым исходным кодом под названием Native Alpha, которое необходимо загрузить с Github.
Наконец, мы также покажем вам, как использовать старый добрый Google Chrome, чтобы создавать приложения для Android из веб-сайтов. Итак, без лишних слов, приступим.
Примечание. Службы, у которых нет полнофункциональных веб-сайтов, не смогут волшебным образом получить функциональность собственных приложений с помощью методов, описанных ниже.
Например, Instagram не позволяет загружать изображения на свой веб-сайт, а это означает, что созданное вами приложение также будет затруднено.
Приложение 1: Hermit; Developer: Chimbori
На данный момент лучший способ превратить сайт в мобильное приложение — это приложение под названием Hermit (Бесплатно). Его можно бесплатно загрузить в магазине Google Play.
Почти все соответствующие функции, включая создание приложений, темный режим, блокировку рекламы, полноэкранный интерфейс и т. д.
Доступны в бесплатной версии. Однако некоторые расширенные функции, такие как скриптлеты, теги, блокировщик контента и настраиваемый пользовательский агент, находятся за платным доступом.
Примечание. Не забудьте изменить системную тему на темную («Настройки»> «Дополнительные настройки»> «Тема»> «Темная»), чтобы все страницы настроек и меню отображались в темном режиме.
Вы также можете превратить любой сайт в облегченное приложение для Android с помощью Hermit. Мы используем Beebom в качестве примера, и вот как это сделать:
Hermit — это многофункциональное приложение, которое по большей части отлично работает. Он предлагает вариант темного режима, полноэкранный пользовательский интерфейс без полей и даже встроенный блокировщик рекламы, которые можно настроить для каждого облегченного приложения отдельно.
Однако он немного глючит, и, по моему опыту, вам, возможно, придется дважды или трижды попробовать определенные варианты, прежде чем заставить их работать так, как рекламируется.
Приложение 2: Native Alpha; Developer: Cyclonid
Native Alpha — это приложение для Android с открытым исходным кодом, которое может превратить любой веб-сайт в приложение для Android за секунды. Созданный разработчиком Cyclonid, он использует встроенный Android WebView для отображения веб-сайта.
По соображениям конфиденциальности вы можете использовать альтернативные веб-просмотры, такие как Bromite, на устройствах с root-доступом. Native Alpha все еще находится на стадии предварительного выпуска и еще не размещена в Play Store. Вы можете скачать его с Github (Бесплатно) и загрузите его на свой телефон Android.
Примечание. Native Alpha совместим только с Android Oreo и более новыми версиями. Разработчик говорит, что поддержка более старых версий находится в разработке, но для этого еще нет ETA.
Примечание. Вы можете создавать упрощенные веб-приложения в любое время, нажав красную кнопку «+» в правом нижнем углу на главной странице приложения.
Native Alpha все еще находится на стадии предварительной версии, но в ней нет некоторых функций Hermit, включая темный режим и полноэкранный интерфейс. Однако существует экспериментальный блокировщик рекламы, который по умолчанию отключен, но его можно включить в настройках.
Native Alpha менее глючит, чем Hermit, а функции, которые он предлагает, более отполированы. Приложение находится в стадии активной разработки, и версия, которую я использовал, v0.85.1, была выпущена 30 января 2021 года. Так что будем надеяться, что разработчик добавит другие интересные функции раньше, чем позже.
Приложение 3: Google Chrome; Developer: Google
Знаете ли вы, что даже Google Chrome для Android позволяет (отчасти) создавать облегченные приложения для многих веб-сайтов?
Совершенно верно, универсальный браузер Google может создавать упрощенные приложения для сайтов, которые имеют встроенный манифест Progressive Web App (PWA). Вот как это сделать:
Примечание. Это будет работать только в обычных вкладках, но не в режиме инкогнито.
Примечание. Вы можете создавать ярлыки веб-сайтов на устройствах Android точно так же, как и в других популярных веб-браузерах, включая Firefox.
Обратите внимание, что в то время как облегченные приложения, созданные Native Alpha и Hermit, функционируют как автономные приложения (больше похожие на оболочки веб-сайтов), ярлыки, созданные Chrome, работают как вкладка браузера, а не как отдельное приложение.
В любом случае, это по-прежнему отличный вариант, особенно если вам не нужно устанавливать еще одно приложение на свой телефон.
Превращение веб-сайтов в приложения означает, что вам больше не нужно будет предоставлять какие-либо инвазивные разрешения для запуска этих служб на вашем телефоне. Они также не будут работать в фоновом режиме, отправляя ваши личные данные на свои серверы и потребляя при этом аккумулятор.
Поэтому используйте наше руководство выше, чтобы превратить веб-сайты в приложения на вашем телефоне Android, и сообщите нам, какой метод вы выбрали и для каких веб-сайтов.
Как конвертировать сайт в приложение онлайн и бесплатно
Мы понимаем что не все могут себе позволить разработку мобильного приложения на начальных этапах, даже если это такое дешевое решение как конвертировать сайт в мобильное приложение. Кроме того, вам может быть интересно и проще конвертировать сайт в приложение онлайн, на каком-то сайте, чем заказывать разработку, например у нас (если что, заказать можно тут =) ). Здесь мы расскажем как конвертировать сайт в приложение бесплатно.
Речь пойдет об сервисе GoNative, который был запущен в 2014 году. Не так давно компания так же запустила другие сервисы для мобильных и веб-разработчиков.
Порядок действий
Первым делом переходим на главную страницу сервиса. На поле для ввода напишите адрес вашего сайта и нажмите кнопку Build.
GoNative – онлайн конвертация сайта в приложение
Далее мы переходим на вторую страницу, где все не намного сложнее. Есть три поля:
После нажатия на Start Building my App вам откроется целый список выпадающих меню, где будут различные настройки приложения по категориям.
Обратите внимание что настройка включает в себя сразу обе платформы, Android и iOS. Поэтому при конвертации сайта в приложение вы должны учитывать разность этих платформ, но собственно говоря там есть подсказки.
Онлайн конвертация сайта в приложение
В деталях все рассматривать не будем, так как там все описано что нужно. Кратко по разделам:
Для того что бы бесплатно конвертировать сайт в приложение нам не нужно все заполнять. Достаточно оформить пару разделов.
Настройка иконки и стартового экрана
Переходим в раздел General Styling и загружаем нашу иконку, желательно 1024 на 1024 пикселя.
Далее идем ниже и нажимаем кнопку Generate для генерации экранов запуска.
Настройка имени пакета
Далее если мы не планируем публиковать приложение, можем пропустить данный пункт. Но для публикации все же понадобится изменить имя пакета на уникальное. Переходим в раздел Build Settings. Пишем вашу строку по примеру (обычно зеркальный адрес сайта).
Теперь нажимаем внизу кнопку Build my app и вас перекинет на страницу с информацией о приложении. Тут будет отображаться прогресс конвертации сайта в приложение онлайн.
Теперь вам на почту придут ссылки. Открываем первую и попадаем на страницу с превью ваших приложений. Здесь же есть ссылки на скачивание готовых файлов или исходников.
Вы можете скачать файл нажав Download Android APK, после этого использовать по своему усмотрению, публиковать на Google Play либо распространяя у себя на сайте.
Заключение
Вы смогли конвертировать сайт в приложение онлайн и бесплатно, а так же самостоятельно. Для некоторых задач такое решение подойдет вполне. Но если вы хотите хорошие результаты и более качественное приложение из сайта, обращайтесь к нам, мы писали статью о том, почему Appverter лучше.
Важно!
Приложение под iOS. Вы сможете конвертировать сайт в приложение iOS, использую вышеописанный сервис, но опубликовать такое приложение вы никогда не сможете!
Сервис предоставляет публикацию их приложения, но за приличную стоимость в 650$ ну и само собой обязательно вам нужно будет оплатить саму лицензию за 790$. Это минимальный набор, в итоге составит 1440$. Так же у них есть сервис «под ключ» за 4790$.
Мы с радостью сообщаем вам, что мы делаем все то же самое и под ключ за намного меньшую стоимость! И все это с гарантией публикации, без всяких лицензий, рекламы и прочего.