Веб приложения на андроид что это

Обновлено: 07.01.2025

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

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

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

WEB-приложения используют самые разные компании. Например, AMAZON, Microsoft, новостной сайт CNN, электронный журнал The Economist.

Что такое мобильное приложение

Мобильное приложение – это программное обеспечение, созданное для мобильных устройств (смартфонов, планшетов и т.п.) и адаптированное под определенную платформу (iOS, Android, Windows). В отличие от web-ресурсов, оно работает без доступа к сети. Это несомненное преимущество.

Для чего нужны web-приложения

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

Для чего нужны мобильные приложения

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

Как работает web-приложение

Для создания веб-приложений используют различные сервисы. Один из них Dreamviewer. Рассмотрим детальнее как это работает.

Как разрабатывается мобильное приложение

Прежде чем заказать разработку у специалистов, компания составляет примерное описание будущего ресурса и определяет цели, которых хочет с его помощью достичь. Обычно эта информация занимает 0,5-1 лист А4. Чем подробнее описание, тем лучше. Также необходимо определиться, для какой ОС будет создаваться приложение. Наиболее прибыльно на сегодняшний день работать с iOS, на втором месте Android, Windows практически не используется для мобильных устройств.
Выбор разработчика. Несколько сервисов, которые помогают найти отечественных и зарубежных разработчиков – AppBooker, Ratingruneta, биржи фриланса.
Разработка макета (может быть шаблонным или индивидуальным). На этом этапе продумываются все детали и весь функционал. Макет согласовывается с заказчиком.
Разработка дизайна и написание программных кодов. Например, для iOS используются языки программирования Objective-C и Swift. Для разработки приложений Apple используется среда программирования Xcode. С ее помощью можно и протестировать продукт.
Полное тестирование приложения. Для этого может использоваться Google Android Virtual Device (AVD) Manager или Xcode. Это программы-симуляторы.
Размещение в AppStore или GooglePlay, откуда конечный пользователь уже может скачать приложение на свое устройство. Прежде чем попасть в магазин. Приложение проходит проверку на вирусы. Поэтому можно не переживать, что, скачивая, подхватишь какой-нибудь вирус. Проверка и публикация в AppStore занимает до 3 недель, в отличие от GooglePlay, где приложение может появиться в тот же день.

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

Что же выбрать?

Преимуществом web-приложений является их масштаб – одновременное использование большой аудиторией.

Недостаток – то, что необходим постоянный доступ к интернету. Для мобильных приложений возможен доступ офлайн.

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

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

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

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

Обычно предшественником моб. приложения всегда является веб-приложение.

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

На прошедшей встрече AndroidDevs Meetup выступили несколько разработчиков из команды мессенджера ICQ. Мой доклад был посвящен Android WebView. Для всех, кто не смог приехать на встречу, публикую здесь статью по мотивам выступления. Пойду по верхам, крупными штрихами. Глубоких технических деталей и много кода давать не буду. Если вас заинтересуют подробности, по ссылке в конце поста можно скачать приложение, специально написанное в качестве иллюстрации, и все увидеть на примерах.

Вот как это выглядит в ICQ. Из пункта Applications можно перейти в список приложений. Это пока еще не WebView, чтобы попасть в него, нужно выбрать одно из приложений. Тогда мы переходим непосредственно в WebView, куда web-приложение загружается из сети.

Как это устроено технически? У WebView есть возможность определенным образом инжектировать Java код в JavaScript. JavaScript может вызывать код, который мы написали и предоставили ему. Это возможность, на которой и основан весь ICQ Web API.

Здесь показано, что внутри ICQ работает WebView, между ними есть инжектированный Java-класс, а в WebView загружаются приложения из сети.

Итак, JavaScript из WebView делает вызовы к Java-коду ICQ. Существует большое число различных вызовов, и в процессе разработки встретилось множество проблем, связанных с работой этого механизма, о которых я и расскажу далее.

После старта загрузки обычно бывает нужно проконтролировать этот процесс: узнать, успешно ли прошла загрузка, были ли редиректы, отследить время загрузки и другие вещи. Также будет сказано о потоках, в которых работает JavaScript и вызовы в Java, о несоответствии типов Java и JavaScript, поведении Alerts в JavaScript и размерах передаваемых данных. Решение для этих проблем будет также описано дальше.

В двух словах об основах WebView. Рассмотрим четыре строки кода:

Наиболее важные методы, которые WebView вызывает у созданных нами инстансов WebViewClient и WebChromeClient:

WebViewClient	WebChromeClient
onPageStarted()	openFileChooser(), onShowFileChooser()
shouldOverrideUrlLoading()	onShowCustomView(), onHideCustomView()
onPageFinished(), onReceivedError()	onJsAlert()

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

После того, как мы отдали WebView команду на загрузку страницы, следующим шагом нужно узнать результат выполнения: загрузилась ли страница. С точки зрения официальной Android-документации, все просто. У нас есть метод WebViewClient.onPageStarted(), который вызывается, когда страница начинает загружаться. В случае редиректа вызывается WebViewClient.shouldOverrideUrlLoading(), если страница загрузилась — WebViewClient.onPageFinished(), если не загрузилась — WebViewClient.onReceivedError(). Все кажется логичным. Как это происходит на самом деле?

onPageStarted→ shouldOverrideUrlLoading (если редирект) → onPageFinished / onReceivedError

onPageStarted → onPageStarted → onPageFinished
onPageStarted → onPageFinished → onPageFinished
onPageFinished → onPageStarted
onReceivedError → onPageStarted → onPageFinished
onReceivedError → onPageFinished (no onPageStarted)
onPageFinished (no onPageStarted)
shouldOverrideUrlLoading → shouldOverrideUrlLoading

Пример кода Java:

Пример кода JavaScript:

Здесь показан пример инжектирования кода Java в JavaScript. Создается коротенький Java-класс MyJavaInterface, и у него есть один единственный метод getGreeting(). Обратите внимание, что этот метод помечен маркирующим интерфейсом @JavaScriptInterface — это важно. Вызывая метод WebView.addJavascriptInterface(), мы пробрасываем данный класс в WebView. Ниже мы видим, как к нему можно обращаться из JavaScript, вызвав test.getGreeting(). Важным моментом здесь является имя test, которое впоследствии в JavaScript будет использовано как объект, через который можно делать вызовы к нашему Java-коду.

Если мы поставим breakpoint на строку return «Hello JavaStript!» и посмотрим имя потока, в котором получен вызов, какой это будет поток? Это не UI-поток, а специальный поток Java Bridge. Следовательно, если при вызове каких-то методов Java мы хотим манипулировать с UI, то нам нужно позаботиться о том, чтобы эти операции передавались в UI-поток — использовать хэндлеры или любой другой способ.

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

Когда мы вызываем некоторые методы, написанные на Java и инжектированные в JavaScript, как показано выше, возникает проблема несоответствия типов Java и JavaScript. В этой таблице приведены основные правила мапинга между системами типов:

Java -> JavaScript		JavaScript -> Java
byte, short, char, int, long, float, double	Number	Number	Byte, short, int, long, float, double ( не Integer, Byte, Short, Long, Float, Double и не char)
boolean	Boolean	Boolean	boolean (не Boolean)
Boolean, Integer, Long, Character, Object	Object	Array, Object, Function	null
String	String (Object)	String	String (не char[])
char[], int[], Integer[], Object[]	undefined	undefined	null
null	undefined	null	null

Самое основное, что стоит здесь заметить, — то, что объектные обертки не передаются. А из всех Java-объектов в JavaScript мапится только String. Массивы и null в Java преобразуются в undefined в JavaScript.

С передачей в обратную сторону, из JavaScript в Java, тоже есть нюансы. Если вызывать какой-то метод, имеющий параметрами элементарные типы, то можно передать туда number. А если среди параметров метода есть не элементарные типы, а скажем, объектные обертки, такие как Integer, то такой метод не будет вызван. Поэтому нужно пользоваться только элементарными типами Java.

Еще одна существенная проблема связана с объемом передаваемых данных между Java и JavaScript. Если передается достаточно большой объем данных (например, картинки) из JavaScript в Java, то при возникновении ошибки OutОfMemory, поймать ее не получится. Приложение просто падает. Вот пример того, что можно увидеть в logcat в этом случае:

Как видите, если в приложении происходит OutOfMemory, то начинают вылетать различные другие приложения, запущенные на устройстве. В итоге, закрыв все что можно, Android доходит до нашего приложения, и, так как оно находится в foreground, закрывает его последним. Еще раз хочу напомнить, что никакого исключения мы не получим, приложение просто упадет. Чтобы этого не происходило, необходимо ограничивать размер передаваемых данных. Многое зависит от устройства. На некоторых гаджетах получается передавать 6 мегабайт, на некоторых 2-3. Для себя мы выбрали ограничение в 1 мегабайт, и этого достаточно для большинства устройств. Если нужно передать больше, то данные придется резать на чанки и передавать частями.

По умолчанию диалог Alert в WebView не работает. Если загрузить туда страницу HTML с JavaScript и выполнить alert('Hello'), то ничего не произойдет. Чтобы заставить его работать, нужно определить свой инстанс WebChromeClient, переопределить метод WebChromeClient.onJSAlert() и в нем вызвать у него super.onJSAlert(). Этого достаточно, чтобы Alerts заработали.

Ещё одна серьезная проблема связана с портретной и альбомной ориентацией. Если поменять ориентацию устройства, то по умолчанию Activity будет пересоздана. При этом все View, которые к ней прикреплены, тоже будут пересозданы. Представьте ситуацию: есть WebView, в который загружена некая игра. Пользователь доходит до 99 уровня, поворачивает устройство, и инстанс WebView с игрой пересоздается, страница загружается заново, и он снова на первом уровне. Чтобы этого избежать, мы используем мануальную обработку смены конфигурации устройства. В принципе, это вещь известная и описана в официальной документации. Для этого достаточно прописать в AndroidManifest.xml в разделе активити параметр configChanges.

Это будет означать, что мы сами обрабатываем смену ориентации в activity. Если ориентация изменится, мы получаем вызов Activity.onConfigurationChange() и можем поменять какие-то ресурсы программно. Но обычно activity с WebView имеют только сам WebView, растянутый на весь экран, и там ничего делать не приходится. Он просто перерисовывается и все продолжает нормально работать. Таким образом, установка configChanges позволяет не пересоздавать Activity, и все View, которые в нем присутствуют, сохранят свое состояние.

Если в web-страницу встроен медиаплеер, то часто возникает потребность обеспечить возможность его работы в полноэкранном режиме. Например, медиаплеер youtube может работать внутри web-страницы в html-теге iframe, и у него есть кнопка переключения в полноэкранный режим. К сожалению, в WebView по умолчанию это не работает. Чтобы заставить это работать, нужно сделать несколько манипуляций. В xml layout, в котором расположен WebView, разместим дополнительно FrameLayout. Это контейнер, который растянут на весь экран и в котором будет находится View с плеером:

А затем в своем инстансе WebChromeClient переопределим несколько методов:

Система вызывает WebChromeClient.onShowCustomView(), когда юзер нажимает на кнопку перехода в полноэкранный режим в плеере. оnShowCustomView() принимает View, которое и репрезентует сам плеер. Этот View вставляется в FullScreenContainer и делается видимым, а WebView скрывается. Когда пользователь хочет вернуться из полноэкранного режима, вызывается метод WebChromeClient.onHideCustimView() и проделывается обратная операция: отображаем WebView и скрываем FullScreenContainer.

Web-разработчики знают, что этот контейнер используется на web-страницах для того, чтобы пользователь мог выбрать какой-то файл и загрузить его на сервер, либо показать на экране. Для работы этого контейнера в WebView нам нужно переопределить метод WebChromeClient.openFileChooser(). В этом методе есть некий callback, в который нужно передать файл, выбранный пользователем. Никакого дополнительного функционала сам по себе /> не имеет. Диалог выбора файла нам нужно обеспечить. То есть мы можем открыть любой стандартный Android picker, в котором пользователь выберет нужный файл, получить его, например, через onActivityResult(), и передать в callback метода openFileChooser().

Пример кода JavaScript:

Пример кода Java:

В JavaScript есть полезный объект Navigator. У него есть поле onLine, показывающее статус сетевого подключения. Если у нас есть подключение к сети, в браузере это поле имеет значение true, в противном случае — false. Чтобы оно работало корректно внутри WebView, необходимо использовать метод WebView.setNetworkAvailable(). С его помощью мы передаем актуальное сетевое состояние, которое можно получить при помощи сетевого broadcast receiver или любым другим способом, которым вы трекаете сетевое состояние в Android. Делать это нужно постоянно. Если сетевое состояние изменилось, то нужно заново вызвать WebView.setNetworkAvailable() и передать актуальные данные. В JavaScript мы будем получать актуальное значение этого свойства через Navigator.onLine.

Вопрос: Есть проект CrossWalk — это сторонняя реализация WebView, позволяющая на старых устройствах использовать свежий Chrome. У вас есть какой-то опыт, вы пробовали его встраивать?
Ответ: Я не пробовал. На текущий момент мы поддерживаем Android начиная с 14-й версии и уже не ориентируемся на старые устройства.

Вопрос: Как вы боретесь с артефактами, которые остаются при прорисовке WebView?
Ответ: Мы с ними не боремся, пробовали — не получилось. Это происходит не на всех устройствах. Решили, что это не настолько вопиющая проблема, чтобы тратить на нее больше ресурсов.

Вопрос: Иногда требуется WebView вложить в ScrollView. Это некрасиво, но иногда требуется по заданию. Это не поощряется, даже где-то запрещается, и после этого возникают недостатки в работе. Но все равно иногда это приходится делать. Например, если вы сверху рисуете WebView, а под ним рисуете какой-то нативный компонент (который должен быть нативным согласно требованию), и все это должно быть выполнено в виде единого ScrollView. То есть сначала пользователь посмотрел бы всю страничку, а потом, если бы захотел, то долистал бы до этих нативных компонентов.
Ответ: К сожалению, не могу вам ответить, потому что я не сталкивался с такой ситуацией. Она довольно специфическая, и представить себе вариант, когда нужно WebView положить в ScrollView, мне сложно.

Вопрос: Есть почтовое приложение. Там сверху шапка с получателями и со всем остальным. Даже в этом случае не все будет гладко. У WebView возникают большие проблемы, когда он пытается определить свой размер внутри ScrollView.
Ответ: Можно попробовать отрисовать означенную часть UI внутри WebView.

Вопрос: То есть полностью перенести всю логику из нативной части в WebView и оставить эти контейнеры?
Ответ: Даже, может быть, логику переносить не надо, имеется в виду инжектирование Java-классов. Логику можно оставить и вызывать через инжектированный класс. В WebView можно перенести только UI.

Вопрос: Вы упоминали про игры в мессенджере. Они представляют собой web-приложения?
Ответ: Да, это web-страницы с JavaScript внутри WebView.

Вопрос: Вы все это делаете, чтобы просто не переписывать игры нативно?
Ответ: И для этого тоже. Но основная идея в том, чтобы дать сторонним разработчикам возможность создавать приложения, которые могут встраиваться в ICQ, и с помощью этого ICQ Web API взаимодействовать с мессенджером.

Вопрос: То есть в эти игры можно играть также через web-браузер на лэптопе?
Ответ: Да. Она может быть открыта в web-браузере, и мы иногда их прямо в нем и отлаживаем.

Вопрос: Вы упомянули, что режете данные на куски по одному мегабайту. Как вы их потом собираете?
Ответ: Мы сейчас этого не делаем, потому что у нас нет такой потребности.

Вопрос: Хватает одного мегабайта?
Ответ: Да. Если картинки больше, то пытаемся их ужимать. Я сказал о том, что если такая потребность существует, то это может быть решением — разрезать и собирать потом в Java.

Вопрос: Как вы обеспечиваете безопасность работы приложений в песочнице? Правильно ли я понял, что из JavaScript приложения нужно вызывать инжектированные Java-классы?
Ответ: Да.

Вопрос: Как будет обеспечиваться в этом случае безопасность, запрещен ли доступ к каким-то системным функциям?
Ответ: Прямо сейчас, так как система еще довольно молодая, у нас в основном используются наши собственные web-приложения, и мы им полностью доверяем. В дальнейшем все приложения, которые будут поступать к нам, будут администрироваться, код будет просматриваться, для этого выделена специальная Security Team. Дополнительно будет создана специальная система разрешений, без которых приложения не смогут получить доступ к какой-то критической для пользователя информации.

Android System WebView
версия: 96.0.4664.45

Последнее обновление программы в шапке: 15.11.2021

Краткое описание:
Системный компонент Android для обработки веб-контента в приложениях Android.

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

Android System WebView что это?

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

На самом деле, сущность Android System WebView предельная ясна – это системный компонент, аналог веб-браузера, благодаря которому вы можете просматривать страницы. Он с самого начала будет установлен на вашем устройстве и единственное, что от вас нужно, так это его обновление. С помощью WebView вы сможете отобразить любой контент на смартфоне, включая ваш собственный. Построен этот компонент на движке WebKit, что позволяет ему загружать страницы так же, как Chrome или Safari. В общем, вещь необходимая, тем более, что платить за неё не надо.

Однако в ней есть и проблемы. Во-первых, пользователи жалуются, что порой WebView до неприличного много жрёт памяти, и отобрать свои родимые мегабайты не так-то просто. Универсальное решение трабла так и не найдено. Во-вторых, отказ выпуска обновлений для более старых версий андроида, начиная с 4.3. Причины? «Не хотим и не будем пересматривать код». При этом любому понятно, что уязвимость движка браузера означает уязвимость приложений системы – все они так или иначе с ним связаны.
Источник>>

Работающий стартап, это тот, который построенный на принципах стратегии MVP (Minimum Viable Product). Такой подход позволяет вам проверить ваш продукт перед запуском его в широкие массы.

После запуска MVP изучаете реакцию вашей аудитории и рынка на него, меряете покупательских спрос. Как результат, вы получаете первые плоды от продаж, первый пользовательский опыт, первый отзыв о продукте / сервисе. У вас вырисовывается полное представление о проекте, и о том, что с ним дальше делать: в каком направлении развиваться и развиваться ли вообще.

Ниже мы детально рассмотрим как механизм MVP может помочь в сборе информации и превращении ее в ценностное предложение. И помните, что как стратегический предприниматель, лучше выбирать такой способ разработки продукта, который покажет результаты в первые дни работы. Пссс… правильный ответ — веб-приложение;)

Взывая к принципам “Бережливого стартапа” (Lean startup)

Запуская технический продукт, который не имеет никакой взаимосвязи с камерой или микрофоном смартфона, подумайте о том, чтобы начать все-таки с веб-приложения. Функционально браузеры быстрее развиваются чем мобильные приложения, и соответственно количество пользователей у них больше. При создании приложения лучше задействовать принципы MVP. Также не забывайте, что оно должно запускаться в Chrome или Safari.

Приложения подобные Uber или Instagram напрямую зависят от функциональности девайса (геолокация), но есть много других продуктов, которые не нуждаются в взаимодействии с API устройства. А благодаря адаптивному веб-дизайну такие приложения получают межплатформенную доступность и корректно отображаются на экранах разного разрешения.

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

Итак, давайте рассмотрим четыре популярные технологии создания мобильных приложений, а также их основные различия. Это поможет определить практичный способ верификации бизнес-идеи и облегчит конструирование будущего продукта. Возможно, веб-приложение (а не нативное мобильное приложение) поможет сократить расстояние между MVP и запуском полноценного проекта.

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

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

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

Эта технология — это просто оболочка браузера, а не полнофункциональное приложение, поэтому технически это все еще веб-сайт;
Пользователи не получат опыт работы с нативным приложением (анимация, производительность), поскольку пользовательский интерфейс — это просто полноэкранное окно браузера без строки URL, которая может работать в автономном режиме;
Плохая совместимость (по-прежнему недоступна на iPhone и iPad).

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

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

Apache Cordova — это платформа для создания мобильных приложений с использованием HTML, CSS и Javascript.

Приложения, созданные с использованием Apache Cordova, работают во встроенной среде браузера (WebView) на мобильных платформах Android, iOS и загружаются из App Store или Google Play Store. Приложение запускается с помощью ярлыка, который расположен на главном экране, и взаимодействует с API-интерфейсами смартфонов, функциями девайса (геолокация, камера и т. д.).

Пользовательский интерфейс приложения, созданного с помощью этой инфраструктуры, не будет таким гладким, как в родном (native) приложении. Внешний вид интерфейса аналогичен интерфейсу веб-сайта (задержка нажатия на 300 мс, фантомные клики при прокрутке и так далее). Конечно, есть модули и фреймворки, которые предлагают компоненты пользовательского интерфейса. Модули разработанные так, чтобы быть похожими на собственные приложения, но они все еще не дотягивают до опыта взаимодействия с родным приложением.

Помимо Cordova, есть и другие популярные платформы — Ionic и PhoneGap. Для примера того, как такое приложение выглядит и работает, можно скачать приложение для Национального музея афроамериканской истории и культуры.

Это приложение было создано с использованием Ionic framework и предлагает следующие возможности:

Поиск / исследование конкретных объектов в музее;
Видео дополненной реальности;
Обмен через социальные сети;

Недавним примером гибридного приложения, которое мы создали в Ezetech для Tickfinity — TicketNetwork POS для мобильных устройств (видео).

Высокая скорость разработки;
Написаны с помощью HTML, CSS, Javascript, что обеспечивают кросс-совместимое iOS, Android и веб-программное обеспечение (требуется только один веб-разработчик);
Доступны фреймворки, которые эмулируют пользовательские элементы UI (например, кнопки, меню и так далее);
UX близок к нативному опыту с использованием элементов UI, которые имитируют поведение обычного приложения;
Доступ к API-интерфейсу смартфона ( камера, push-уведомления, геолокация и другие).

UX не так хорош, как в родных приложениях (задержки на клики 300 мс, фантомные клики при прокрутке);
Чем сложнее приложение, тем медленнее оно работает из-за использования различных оболочек и библиотек;
Не работает в офлайн режиме;
Анимации трудно реализовать в UI.

Этот вариант подходит для MVP простых веб или мобильных приложений. Если у вас уже есть веб-приложение, построенное с помощью Javascript, вы можете использовать существующий код. Проще говоря Apache Cordova хорош для быстрого создания недорогих мобильных приложений со стандартными функциями.

React — отличный выбор, если ваше веб-приложение построено с помощью React.js. Это относительно новая технология в мире гибридных приложений, и миграция из существующего веб-приложения в мобильное может пройти довольно быстро. В результате вы получаете мобильное приложение, которое использует собственные компоненты ОС вашего смартфона (кнопки, входы и другие функции устройства). Производительность хорошая, потому что исходный код конвертируется в собственное мобильное приложение, а не работает во встроенном окне браузера.

Некоторые примеры приложений, использующих React Native:

Высокая скорость разработки для веб-приложений на основе React;
Веб-приложение, созданное с помощью React.js, может быть легко преобразовано в мобильное приложение React Native, а некоторые исходные коды можно повторно использовать;
Собственный пользовательский опыт;
Приложение выглядит и воспринимается как родное мобильное приложение для конкретной платформы;
Низкие затраты на разработку;
Эксперты в React Native обычно могут создавать приложения для Android и iOS.

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

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

Разработка нативного приложения (Native app development)

Создание родных (native) приложений для каждой платформы — лучший выбор с точки зрения производительности и качества продукции, но это также и самый дорогой подход. Если у вас уже есть веб-приложение, вам нужно будет только создать мобильные клиенты для мобильного приложения Android и iOS, которые будут подключены к тому же бэкенду, что и ваш веб-клиент. Незначительные изменения могут быть все еще необходимы на бэкенде, но это не займет много времени.

Обычно вам нужно как минимум 2 разработчика — разработчик iOS, который работает над iPhone-приложением с использованием Objective-C или Swift, и разработчика Android, который будет использовать Java или Kotlin. Поэтому стоимость разработки будет выше, чем в любом из вышеперечисленных подходов.

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

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

Coinbase: одно из самых популярных приложений для торговли криптовалютами.

Uber: самое популярное приложение для транспортировки.

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

Более высокие затраты по сравнению с разработкой гибридных приложений;
Различные стеки технологий для разных платформ (требуется больше разработчиков).
Обратите внимание, что лучше всего создавать нативное приложение c нуля, только если у вас есть на это ресурсы. Технологии для создания таких приложений уже давно существуют, что дает множество модульных решений, а также сообществ с открытым исходным кодом, доступных разработчикам для эффективного решения проблем.

Есть два основных варианта, которые хорошо подойдут для перехода из веб-приложения в мобильное — разработка гибридного приложения и запуск с нуля (разработка нативного приложения).Если функциональность вашего продукта не слишком сложна, и вы просто хотите предложить мобильным пользователям лучший опыт, вы должны использовать React Native (если сайт на реакте) или Apache Cordova для разработки вашего гибридного приложения. Это оптимальный вариант, если у вас ограничен бюджет и вам нужна поддержка на Android и iOS.

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

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

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