Запечённые мобильные плейсхолдеры

Те самые плейсхолдеры

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

Мобильные приложения Драйва2 достаточно сложные, потому что часть сделана на родных для ОС технологиях (на нативных), а часть — на веб-технологиях. Такой подход называют «гибридным». Вебовая часть сделана на вебвью — это такой встроенный браузер, с которым взаимодействует нативная часть. 

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

В результате всех ухищрений среднестатистический пользователь не подозревает, что приложение не нативное, и ожидает, прости, господи,  нативного экспириенса. 

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

Долгое время мы жили вообще без прелоадера в айосе. Типа, был просто серый экран, а потом — бух и всё загрузилось. Особенно отстойно было с плохим интернетом, когда приходилось неизвестно сколько пялиться в пустой серый экран.

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

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

Фишка в том, что и код страницы и код плейсхолдера хранятся на сайте, поэтому плейсхолдер всегда похож на настоящую страницу — если поменяем, скажем, скругление карточек, то поменяем и в плейсхолдере, и на странице. А в приложении есть механизм скачивания и сохранения плейсхолдеров — «запекания». В результате приложение может отображать плейсхолдеры мгновенно:

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

Увидеть вживую можно в приложении. Регистрироваться для этого необязательно:


P. S. Осталось теперь, чтобы какой-нибудь хороший человек нарисовал кучу плейсхолдеров для разных страниц.


Error

Anonymous comments are disabled in this journal

default userpic

Your reply will be screened

Your IP address will be recorded