Найти тему
Леон Рублев

Мобильное приложение из сайта - продвинутое webview

Что это?

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

Как сделать?

В какой-то степени можно считать это достаточно простой задачей.

  1. Сейчас много сервисов предлагает подобную услугу по приемлемым ценам (от 5 до 50.... долларов). Описывать процесс создания особо нечего. Заходите - создаёте - платите. Минусы: платно, в основном предлагают простые приложения, без нужного функционала.
  2. Сделать самому в Android Studio. Установить Android Studio, найти исходник, вставить вашу ссылку, скомпилировать apk. Минусы: нужно делать самому, существуют только исходники простых приложений, в которых много "косяков". Если быть точнее, то это не косяки, а просто отсутствие нужного функционала. Например при нажатии кнопки "назад" приложение просто закрывается, а должен происходить переход к предыдущей странице сайта. Что бы этого избежать надо дописать несколько строк кода...
  3. Заказать продвинутое мобильное приложение из сайта с расширенным функционалом на сервисе http://siteconverter.businessapp.trade/

Минусы: тоже платно. Цена - 10$. Зато функционал с лихвой оправдывает вложенные средства.

Сервис только начал работу, поэтому ещё не так много модулей.
Сервис только начал работу, поэтому ещё не так много модулей.

Описание функционала продвинутого webview:

  1. Push уведомления. Это достаточно просто, поэтому их нет смысла особо описывать. Втравливаете данную технологию в приложение, и начинаете всем каждые 5 минут рассылать рекламу.
  2. Расширенный компонент webview. По сути такое приложение не просто отображает ваш сайт. Рассмотрим самый простой пример, где может понадобится не стандартный компонент webview - сайт знакомств. Если посетители такого сайта заходят на него с компьютера, то фотография в профиль загружается из папки. Что происходит, если открыть такой сайт на мобильном и попытаться добавить фото? То же самое, откроется файловый менеджер, но... По сути, у пользователей мобильных телефонов, должен быть выбор откуда загружать фотографию - из галереи, или сделать селфи, и сразу отправить его на сайт в свой профиль. Вот тут на помощь и придёт расширенный компонент webview.
  3. Панель управления. Большинство сервисов при создании приложения просит у вас ссылку на сайт, а затем "намертво" встраивает её в ваше будущее приложение. Что произойдет когда вы решите изменить домен сайта? Правильно - приложение перестанет работать. Сервис BusinessApp.trade предлагает дополнительную панель для администрирования вашего приложения. В ней есть различные настройки, при помощи которых вы можете управлять компонентами и даже поменять ссылку в приложении.
  4. Нативные модули. Создать простое webview - просто. Но что, если вы хотите, чтобы пользователи не могли отличить его от настоящего приложения? Сделать это можно лишь добавив компоненты, которые могут быть только у настоящих приложений, и не может быть на сайте. Это могут быть элементы отображения - bottom nav, side menu и т.п.
  5. DeepLink. Достаточно избитая тема, но, вы можете вести рекламные компании, и вам надо чтобы посетители, перешедшие по определённой ссылке попадали на нужный экран приложения. Добиться такого эффекта можно при использовании Deep Link.
  6. Запомнить последний URL, который посетил пользователь. Согласитесь, достаточно полезная функция, если вы решили использовать технологию webview. После того, как пользователь вышел из приложения, обычно все данные пропадают. Если у вас большой сайт, то, долистав до нужного контента, выйдя и открыв приложение снова, пользователь опять окажется на главной странице, что очень его расстроит. Чтобы лишний раз не бесить ваших клиентов, используйте функционал запоминания последнего посещённого URL. В этом случае, зайдя повторно, пользователь окажется на нужном месте.
  7. Fingerprinting - вход по отпечатку пальца. Не совсем понятно, как в реальной практике можно применить данную технологию, но если сделать webwiew из сайта с такой фичей, то приложение точно уж никто не отличит от нативного.
  8. Предупреждение об отсутствии интернета. Вы же ведь не хотите, чтобы пользователи, кликнув внутри приложения на ссылку, увидели сообщение о недоступности сайта, и сразу поняли что это лишь оболочка, а не настоящее приложение. Хуже всего, если такое приложение вы делали по заказу, выдав его за реальное нативное приложение. Для избежания таких неприятных моментов используется модуль NO-INTERNET, который выдаст предупреждение и скроет компонент webview.
  9. QR-code. Ваш сайт использует различные акции? Или, например, вы хотите организовать сервис по учёту товаров. Конечно же сайт на html, хоть сейчас у JS и есть API для камеры, не сможет быстро и корректно сканировать QR-код. Поэтому вам придётся разрабатывать мобильное приложение отдельно. Но, если использовать BusinessApp.trade, вы сможете интегрировать в ваш сайт нативную поддержку камеры и qr-код сканер.
  10. Отсутствие косяков. Нет таких досадных вещей, как закрытие приложения при клике на аппаратной кнопке "назад". Или перекрытие клавиатурой полей ввода.