Мобильное веб-приложение. Что такое WebView, советы и технические заметки для дизайнера.

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

Мобильное веб-приложение — это имитация нативного приложения. Такой подход называют WebView. Под видом приложения в магазине приложений, пользователь скачивает лишь движок браузера, который открывает определенную страницу в интернете, скрывая адресную строку. Хоть браузер и притворяется приложением, он всё ещё содержит абсолютно все типичные браузерные ограничения, и не может напрямую взаимодействовать с устройством. К примеру, так поступил ВК, когда только появился в магазинах приложений — просто «обернул» свой сайт в оболочку приложения.

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

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

Мгновенное обновление. Всё действие происходит в вебе, поэтому любые изменения применяются мгновенно, без необходимости установки обновления.

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

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

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

В итоге, получается быстрое и дешевое решение для бизнеса, но далеко не всегда может подойти. Моя любимая фраза — всё зависит от задач)

Шрифт — Roboto. Лицензия не позволяет использовать айосовский шрифт San Francisco в браузере. Хоть браузер и эмулирует приложение, он остаётся браузером, и страница для андроида и для айос выводится одна и та же. Можно использовать системные шрифты, тогда у андроида будет отображаться Roboto, а у айос San Francisco. Но в этом случае усложняется работа дизайнера и теряется контроль, ведь есть ещё виндовс и линукс со своими шрифтами; если пользователь поставит свой системный шрифт, то браузер будет выводить его; если системный шрифт недоступен, то он пойдёт по списку с другими системными шрифтами. Поэтому я использую один шрифт во всём проекте — Roboto. Он максимально похож на San Francisco и есть в любом браузере. App Store пропускает приложение с этим шрифтом, при соблюдении остальных гайдлайнов.

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

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

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

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

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

Буду стараться дополнять статью ещё чем-то интересным. Подписывайтесь на мой телеграмм канал

Burabay Travel — реализованный мною кейс. На момент публикации приложение находится в бете. Из за того, что это гос. заказ, заказчики настояли на публикации до фикса багов что бы успеть в свои отчетные сроки. Дизайн всего приложения разработан за 1 месяц. Разработка фронта и бэка в 2-3 разработчика — 1-2 месяца