Loading…
Mobile Bridge: Making WebViews Feel Native
2023-10-18
- Source
- Shopify
- Published
- Added to Yomu
Summary
Shopify’s mobile app has about 600 screens, but building every non-critical screen natively or in React Native was costly and slowed development, while conventional WebViews felt slow, disconnected, and out of place. Mobile Bridge addresses this hybrid-app problem with native iOS and Android modules that preload, authenticate, cache, and reuse WebViews, reducing P75 load time from 6 seconds to 1.4 seconds, including network latency and rendering. Built on @remote-ui/rpc, the framework uses JavaScript, CSS, Polaris overrides, title and action APIs, TransportableView, snapshots, and native modal transitions to preserve state and align web screens with native navigation and appearance. WebViews can also invoke native features such as date pickers, barcode scanning, and Add to Wallet; Shopify says the standalone library is being adopted across other products while critical features remain native or React Native.
Context
Shopify needed to deliver less-critical screens in its mobile app without building and maintaining separate web and mobile implementations. Traditional WebViews created a poor experience because they were slow, visually inconsistent with native screens, and disconnected from native navigation and functionality.
Approach / What changed
Mobile Bridge combines native iOS and Android WebView modules with a web-to-mobile communication layer based on @remote-ui/rpc. It preloads and reuses authenticated WebViews, modifies web styling and Polaris components, transports WebViews between native screens while preserving state, uses snapshots for back navigation, presents modals as native screens, and exposes native UI and capabilities to web content.
Takeaways
- Preloading, authenticating, caching, and reusing WebViews reduced P75 load time from 6 seconds to 1.4 seconds, including network latency and rendering.
- TransportableView moves an existing WebView between screens without losing session data or dynamic content; snapshots prevent blank or broken visuals during back navigation.
- Mobile Bridge lets WebViews use native features such as date pickers, barcode scanning, and Add to Wallet, while Shopify experiments with rendering Polaris components natively through remote-dom.