Приключение гибридных приложений в стране клавиатур

Разработка гибридных приложений прекрасна. Большую часть времени вы проводите на идиллических пастбищах веб-технологий, а с помощью Cordova получаете многие преимущества нативной разработки без особых дополнительных усилий. HTML5, CSS и JavaScript — ваши верные друзья. Они сэкономят вам время и деньги, которые можно потратить, чтобы выпить пару пива и насладиться жизнью. Но иногда приходится познать кошмар каждого разработчика мобильных веб-приложений и окунуться в сложный мир различных нативных сред разработки.

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

Проблемы

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

На iOS веб-представление по-разному меняет размер клавиатуры в версиях 6.1, 7.0 и 7.1. Также клавиатура по-разному реагирует на включение или исключение метатега viewport. Добавим сюда еще поддержку планшетов и альбомную ориентацию. В итоге, пытаясь сделать так, чтобы каждый сценарий на всех устройствах сработал на отлично, можно заполучить еще массу новых проблем. 

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

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

И, помимо всего этого, еще нужно убедиться, что события касание/нажатие срабатывают должным образом. Здесь основная проблема заключается в том, что удаление печально известной задержки в 300 мс часто не дает клавиатуре появиться. Если запретить реализацию исходного поведения при событиях касания или нажатия, то это может привести к разным последствиям. Так можно остановить появление нежелательных вещей, но в то же время можно легко подавить нужные действия.

Решение

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

Чтобы сделать это, мы разработали Ionic Keyboard Plugin, который работает и на iOS и на Android. Он запускает события, которые указывают, когда появляется и скрывается клавиатура, и какой она имеет при этом размер. Это позволяет Ionic быстро и точно подстраивать прокручиваемую область контента, что, в свою очередь, дает возможность прокручивать на экране любые скрытые поля ввода. На iOS плагин не позволяет использовать нативную прокрутку. А чтобы приложение ощущалось более нативным, вам дается возможность удалить вспомогательную панель, которая по умолчанию появляется вверху клавиатуры в веб-форме.  Это не специфический плагин для Ionic, и его можно использовать в любом приложении Cordova, чтобы показывать информацию о клавиатуре на веб-уровне.

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

Можете вновь разгуляться

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

Комментарии