Mobile Bridge: Making WebViews Feel Native
Article Summary
Shopify had 600 mobile screens to build. Building them all natively would have crushed their velocity, but WebViews felt slow and broken.
Shopify's mobile team created Mobile Bridge, a framework that transforms WebViews from clunky web pages into experiences that feel indistinguishable from native screens. This post breaks down their three-part approach to solving WebView performance, appearance, and integration challenges.
Key Takeaways
- Preloading and caching WebViews cut load times 6x: from 6 seconds to 1.4 seconds
- TransportableView moves WebViews between screens without losing state or session data
- Native components like date pickers integrate directly into WebViews via Mobile Bridge
- Snapshots prevent blank screens during back navigation on iOS
- Now shipping as a library across Balance, POS, and Shop apps
Mobile Bridge turned WebViews into a core mobile strategy at Shopify, freeing engineering bandwidth to focus on critical native features while maintaining near-native UX.
About This Article
Shopify's WebViews had a poor user experience because they behaved like browsers. Users could zoom in and out, select text, and see UI elements like title bars and footers that didn't match the native app design.
Shopify used JavaScript to turn off zooming and CSS to block text selection. They hid unnecessary admin interface components and updated Polaris components to look and feel native.
WebViews now look and behave the same way as the rest of the native app. Users no longer notice the jarring shift when they move between screens.