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

Делаем из сайта приложение для Android на конструкторе

В Практикуме открылись курсы по мобильной разработке для iOS и Android, а мы рассказываем, что это такое и как всё там устроено. Вот что уже было:

• Какую платформу выбрать — iOS или Android.
• Кроссплатформенная разработка.
• Пробный кроссплатформенный проект.
• Настройка среды для разработки собственного приложения.

Теперь сделаем следующий простой шаг — сделаем мобильное приложение для Android на основе веб-страницы. Вот что нам для этого нужно знать:

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

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

Используем конструктор веб-приложений

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

Мы будем пользоваться бесплатным конструктором AppGeyser — у него устаревший интерфейс, но он работает и делает всё, что нам нужно. У бесплатной версии есть два больших минуса: приложение иногда будет показывать какую-то свою рекламу и его нельзя будет опубликовать в Google Play. Если мы хотим просто попробовать — это не критично, а если будет нужно, то всегда можно купить полную версию.Заходим на главную страницу сервиса и нажимаем Login для регистрации — без этого сервис не отдаст нам готовый файл. Дальше всё стандартно: вводим свою почту, придумываем пароль и нажимаем кнопку Sign up:

Теперь можно создавать своё приложение — для этого нажимаем кнопку Create app в правом верхнем углу экрана:

Нам сразу предлагают популярные категории приложений, из которых нам нужно выбрать Business Website — это как раз про перевод страницы в приложение:

Выбор и загрузка сайта

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

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

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

Мы опубликуем страницу на учебном хостинге и дадим ей такой адрес:

Теперь этот адрес нам нужно вставить в конструктор и нажать Get Content:

Настройка приложения

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

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

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

После этого нам остаётся нажать кнопку Create и дождаться страницы с вариантами загрузки:

Загрузка приложения

Вот какие варианты загрузки предлагает конструктор:

• скачать файл apk;
• скачать файл aab (то же самое, что apk, но внутри больше всякого разного для установки);
• скачать по QR-коду;
• скачать по ссылке в браузере.

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

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

Что дальше

Это был простой способ сделать мобильное приложение из сайта. Скоро сделаем сложное, но с полным контролем над каждым этапом и написанием кода — как настоящие мобильные разработчики.

Рекламный блок «Яндекс Практикума»

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

Получите ИТ-профессию

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

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

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

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

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

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

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

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

Комьюнити теперь в Телеграм
Подпишитесь и будьте в курсе последних IT-новостей

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

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

Если самостоятельно сделать его не получается, то надо ли непременно искать программиста? Да, но только тогда, когда нужен высококачественный продукт со своими фишками. В противном случае можно обратиться к онлайн-сервисам, которые выполняют конвертацию сайта в приложение всего за несколько минут. Кроме того, если ваш сайт работает на 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 с бесплатным пробным периодом.

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

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

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

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

Онлайн сервис, который конвертирует сайт в мобильное приложение для Android и iOS за 5 минут. Без рекламы и с PUSH рассылкой.

Например, https://yandex.ru
Продолжить

Более 12000 пользователей с 2019 года выбрали технологии Tadapp Native

Лучшая цена

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

Полностью онлайн

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

Сборка 24/7

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

Все платформы

Один сайт — 2 приложения. Мы подготовим файлы для Android и Apple iOS. Подписанные приложения готовы для публикации во всех маркетах

Бесплатные PUSH

Отправляйте своим пользователям PUSH рассылки прямо из Личного кабинета. Мгновенная доставка и бесплатно для любых объёмов

Брендирование

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

Своя подпись

Подписывайте приложения собственным сертификатом разработчика или воспользуйтесь нашим (подпись Tadapp доступна для приложений Android)

Realtime обновление

Не нужно постоянно обновлять приложение — весь контент в приложении обновляется синхронно с контентом на вашем сайте

Поддержка

Не знаете с чего начать или есть проблемы с приложением? Мы всегда поможем — просто дайте нам знать через чат в Личном кабинете

Шаблоны приложений для Вашего сайта

Drawer

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

Navbar

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

Blank

Ничего лишнего — только Ваш сайт.
Идеально подходит для HTML5 игр и для сайтов, у которых есть хорошая мобильная версия и 100% отзывчивость на мобильных устройствах

Простой и понятный интерфейс

Управление Все приложения в 1 аккаунте

Все приложения хранятся в одном аккаунте — легко изменить и начать рассылку

Создание Поэтапный процесс создания

Выполните 4 простых шага и получите файлы приложения. Мы подскажем, что делать

Сборки Создавайте и обновляйте

Хотите добавить новую иконку? Создайте новую сборку и обновите приложение

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

Продвижение в поисковых сетях

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

Снижение расходов на рекламу сайта

Привлекайте мобильный трафик из маркетов — очень часто он в разы дешевле, чем обычный трафик.

Новый канал связи

Используйте PUSH рассылки вместо SMS рассылок. Это дешевле и привлекательнее для пользователя.

Легко протестировать перед сборкой

На сайте

Запустим Ваше приложение на реальном устройстве (Google Nexus или iPhone 7) и покажем результат онлайн прямо в Личном кабинете.

В приложении Expo Go

Скачайте приложение Expo Go, отсканируйте QR код вашего приложение и проверьте работу перед сборкой на своем устройстве.

Создайте сборку

Вы можете создавать неограниченное количество сборок приложения в поиске идеального дизайна — выбор за Вами!

Дешевле и быстрее любого фрилансера

Оплата единоразово без абонентской платы, подписок и скрытых условий

Активация Стандарт

890 ₽

При оплате в течении 2 дней, далее 1190 ₽

• Android и Apple iOS
• Неограниченное кол-во сборок
• Без рекламы
• Ваша иконка и экран загрузки (заставка)
• Нет PUSH рассылки
• Нет монетизации через AdMob
• Нет статистики Google analytics
• Стандартная поддержка
• Начать конвертацию

Активация PRO

1290 ₽

При оплате в течении 2 дней, далее 1790 ₽

• Android и Apple iOS
• Неограниченное кол-во сборок
• Без рекламы
• Ваша иконка и экран загрузки (заставка)
• Плагин PUSH рассылки
• Плагин Реклама AdMob
• Плагин Google analytics
• Приоритетная поддержка
• Начать конвертацию

Сервис №1 в Европе из России

Первые на рынке автоматического создания нативных приложений из сайта

Как сделать из сайта приложение и выложить его в Google Play за несколько часов. Часть 1/2: Progressive Web App

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

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

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

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

1. Как сделать из сайта приложение и выложить его в Google Play за несколько часов. Часть 1/2: Progressive Web App
2. Как сделать из сайта приложение и выложить его в Google Play за несколько часов. Часть 2/2: Trusted Web Activity

Lighthouse

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

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

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

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

Обратите внимание на раздел Installable. Во-первых, если вы запускаете сайт локально, а вам придётся это делать во время разработки и тестирования, то нужно использовать домен localhost и никакой другой. Благодаря этому будет удовлетворено требование «Use HTTPS», а точнее Lighthouse просто закроет глаза на него, и вы сможете полноценно тестировать свой PWA.

Кроме требования HTTPS, чтобы наше приложение превратилось в PWA и стало устанавливаемым, нужно подключить к сайту service worker и Web app manifest. Давайте сделаем это.

Service worker

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

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

// Должно быть true в production var doCache = true; // Имя кэша var CACHE_NAME = 'my-pwa-cache-v2'; // Очищает старый кэш self.addEventListener('activate', event => < const cacheWhitelist = [CACHE_NAME]; event.waitUntil( caches.keys() .then(keyList =>Promise.all(keyList.map(key => < if (!cacheWhitelist.includes(key)) < console.log('Deleting cache: ' + key) return caches.delete(key); >>)) ) ); >); // 'install' вызывается, как только пользователь впервые открывает PWA self.addEventListener('install', function(event) < if (doCache) < event.waitUntil( caches.open(CACHE_NAME) .then(function(cache) < // Получаем данные из манифеста (они кэшируются) fetch('/static/reader/manifest.json') .then(response =>< response.json() >) .then(assets => < // Открываем и кэшируем нужные страницы и файлы const urlsToCache = [ '/app/', . '/static/core/logo.svg*', ] cache.addAll(urlsToCache) console.log('cached'); >) >) ); > >); // Когда приложение запущено, сервис-воркер перехватывает запросы и отвечает на них данными из кэша, если они есть self.addEventListener('fetch', function(event) < if (doCache) < event.respondWith( caches.match(event.request).then(function(response) < return response || fetch(event.request); >) ); > >);

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

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

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

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

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

Что дальше?

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

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

• Introduction to Progressive Web Apps (Offline First) — Part 1
• Introduction to Progressive Web Apps (Instant Loading) — Part 2
• Introduction to Progressive Web Apps (Push Notifications) — Part 3
• Разработка вашего первого Progressive Web App c React
• 9 amazing PWA secrets
• Progressive Web Apps on iOS are here
• Progressive Web Apps with React.js: Part I — Introduction
• Progressive Web Apps with React.js: Part 2 — Page Load Performance
• Progressive Web Apps with React.js: Part 3 — Offline support and network resilience
• Progressive Web Apps with React.js: Part 4 — Progressive Enhancement
• A React And Preact Progressive Web App Performance Case Study: Treebo