В современном мире мобильных приложений пользователи привыкли ожидать от интерфейса максимальной скорости, плавности и органичности. Особенно это важно для приложений с большой функциональностью, где присутствует множество экранов и разнообразных взаимодействий. Shopify, один из лидеров в области электронной коммерции, столкнулась с задачей создания большого мобильного приложения, состоящего из примерно 600 экранов. При этом не все экраны были равны по уровню критичности для пользователей. Важно было сделать так, чтобы наиболее важные экраны были построены с использованием нативных технологий и React Native, обеспечивая лучшее взаимодействие, а менее важные — эффективно интегрировались, не требуя двойной разработки для веба и мобильных платформ.
Чтобы решить этот вызов, компания обратилась к WebView — традиционной технологии, позволяющей отображать веб-контент внутри мобильного приложения. Однако WebView имеет ряд ограничений, связанных с производительностью, внешним видом и ощущением нативности, что зачастую создает разрыв в пользовательском опыте. По этой причине Shopify решила не мириться с этими ограничениями, а кардинально переосмыслить подход к WebView, создав Mobile Bridge — специализированный фреймворк для улучшения WebView и их интеграции с нативным приложением. Основная цель — сделать WebView быстрыми, «естественными» и максимально вписанными в мобильную среду, чтобы пользователи не ощущали разницы между веб-контентом и нативным интерфейсом. Производительность — основной камень преткновения традиционных WebView.
Задержки в загрузке страницы зачастую связаны с процессом аутентификации, требующим переходов между несколькими редиректами. В Mobile Bridge удалось решить эту проблему путем предварительной загрузки и аутентификации WebView в фоне сразу при запуске приложения. В результате веб-экраны стали загружаться в шесть раз быстрее, сокращая время ожидания с 6 до 1.4 секунды. Также была внедрена система кэширования, позволяющая переиспользовать уже загруженные WebView, существенно улучшая восприятие скорости и отзывчивости интерфейса.
Однако ускорение работы WebView — лишь половина дела. Для полного погружения важно, чтобы веб-часть выглядела так же, как нативные экраны. В Mobile Bridge применили комплекс приемов для стилистического выравнивания интерфейса. Были отключены нежелательные возможности, которые создавали ощущение «запретной» зоны — например, отключили масштабирование страниц и выделение текста, убрали лишние элементы навигации и другие компоненты, относящиеся к админке, которые не нужны в приложении. Для достижения визуального единства использовались CSS правки и JavaScript-вставки, а также внесены изменения в Polaris — дизайн-систему Shopify, что позволило сделать компоненты адаптивными под нативный стиль.
Самым важным аспектом стала интеграция двухсторонней коммуникации между веб и мобильной частями. Mobile Bridge основан на RPC-библиотеке @remote-ui/rpc, что позволяет веб- и нативным компонентам обмениваться данными мгновенно и синхронно. Благодаря этому удалось решить несколько важных UX-задач. Вместо того чтобы заголовки страниц и кнопки действий рендерились внутри веб-страницы, Mobile Bridge предоставляет API, которые отправляют эту информацию в навигационное меню приложения. Таким образом, заголовки экранов и кнопки стали частью единого нативного интерфейса, делая веб-часть незаметной для пользователя.
Навигация — отдельная сложная задача. Веб-браузеры традиционно перезагружают страницу при переходе по ссылкам, что плохо подходит под модель мобильных приложений с возможностью возврата и стеком экранов. Mobile Bridge вводит компонент TransportableView, позволяющий перемещать одно и то же WebView между разными экранами, сохраняя состояние и не теряя данные пользователя. Это делает процесс перехода плавным и быстрым, без эффекта «мигания» или перезагрузки. При возврате назад с экрана пользователю не показывается пустой монитор с ошибкой, так как Mobile Bridge мгновенно делает снимок текущего состояния WebView и отображает его до того, как реальный компонент полностью отобразится.
Это решение значительно повышает ощущение «нативности» и исключает разочарование пользователей. Модальные окна, привычные на вебе, также были доработаны под мобильные стандарты. Вместо статического всплывающего окна они рендерятся как отдельные нативные экраны с собственными анимациями и переходами, что обеспечивает более естественный пользовательский опыт. Кроме того, Mobile Bridge заметно расширил возможности взаимодействия веб-содержимого с нативными компонентами приложения. Примером служит интеграция нативного Date Picker, который теперь используется в WebView для выбора дат, что значительно удобнее и привычнее по сравнению с веб-аналогом.
Также добавлена поддержка нативного сканера штрихкодов и функции "Add to Wallet" на iOS и Android, что повышает функциональность и ускоряет работу пользователей. Такая гибридная архитектура позволяет быстро вносить изменения и улучшения в веб-компоненты, не жертвуя качеством нативного интерфейса, а конвергентный подход существенно сокращает время и ресурсы на разработку. В дальнейшем Shopify планирует еще глубже интегрировать веб и нативные части, используя технологию remote-dom, которая позволит рендерить компоненты Polaris нативно, управляя их логикой сверху с веба. Такой шаг откроет новые возможности для гибкости и масштабируемости, избавит от ограничений версий приложений и ускорит внедрение новых функций. В итоге Mobile Bridge стал по-настоящему прорывным решением, кардинально изменившим подход Shopify к мобильной разработке.
