移动桥:让 WebViews 感觉像原生应用
The Shopify mobile app has around 600 screens, and while all of them contribute to our merchants' mobile experience, not all of these screens are equally essential to their daily tasks.
Shopify 移动应用有 大约 600 个屏幕,虽然所有这些屏幕都对我们商家的移动体验有所贡献,但并不是所有屏幕对他们的日常任务都是同等重要的。
There was no doubt that all critical screens needed to be built using native/React Native to deliver the best possible experience. However, applying the same approach to the rest of the screens proved to be extremely costly and massively slowed down our velocity.
毫无疑问,所有关键屏幕都需要使用原生/React Native 构建,以提供最佳体验。然而,将相同的方法应用于其余屏幕被证明是极其昂贵的,并大大减缓了我们的开发速度。
Our challenge was clear: we needed an efficient way to deliver these less-critical screens within our mobile app, without having to build them separately for web and mobile.
我们的挑战很明确:我们需要一种高效的方式在移动应用中提供这些不太关键的屏幕,而不必为网页和移动分别构建它们。
WebViews seemed like the logical choice, but they typically fall short in delivering a good user experience—often feeling slow, disconnected, and noticeably out-of-place compared to true native screens.
WebViews似乎是合乎逻辑的选择,但它们通常无法提供良好的用户体验——往往感觉缓慢、断开连接,并且与真正的原生屏幕明显不协调。
Rather than accepting these limitations, we took it as an opportunity: could we reinvent WebViews to be faster, look better, and feel as seamless as native screens? This ambition led us to create Mobile Bridge—a framework specifically built to enhance WebViews, enabling web content to blend effortlessly with our mobile app.
我们没有接受这些限制,而是将其视为一个机会:我们能否重新定义 WebViews,使其更快、更美观,并且感觉与原生屏幕一样流畅?这个目标促使我们创建了 Mobile Bridge——一个专门构建的框架,用于增强 WebViews,使网页内容能够与我们的移动应用无缝融合。
In this post, we'll walk you through how we tackled the main issues of traditional WebViews—performance, appearance, and integration—and how Mobile Bridge became a game-changer in our mobile development strategy, even allowing us to accelerate the migration to React Native.
在这篇文章中,我们将带您了解我们如何解决传统 WebViews 的主要问题——性能、外观和集成——以及 Mobile Bridge 如何在我们的移动开发策略中成为游戏规则的改变者,甚至使我们能够加速 迁移 到 React Native。
The Challenge with WebViews
WebViews的挑战
Webviews are generally undesirable because users ...