Bridging the WebView Gap at Shopify
The Shopify mobile app spans roughly 600 screens. Critical workflows get native or React Native implementations, but building every secondary screen twice—once for web and once for mobile—didn't make sense. The team needed a way to ship those less-critical screens efficiently without duplicating work.
WebViews were the obvious candidate, yet their reputation precedes them: slow loads, jarring visuals, and an unmistakable feeling that content isn't part of the app. Shopify's response was Mobile Bridge, a framework that rethinks how WebViews behave inside a native app. The results were dramatic enough that WebViews became a strategic tool in Shopify's mobile roadmap—even accelerating their React Native migration.
Why WebViews Felt Slow
The initial performance investigation pointed to a specific culprit: authentication. Every WebView page load triggered a chain of redirects just to verify the user, adding noticeable latency before content even appeared.
The fix was to stop loading WebViews on demand. Shopify built native modules for iOS and Android that:
- Preload WebViews in the background when the app launches
- Cache WebViews after use instead of discarding them
- Reuse cached instances so subsequent navigations skip the network and rendering wait
This shifted perceived load time dramatically. The P75 WebView load time dropped from 6 seconds to 1.4 seconds—an approximately 6x improvement that includes both network latency and rendering.
Making Web Content Look Native
Once performance was handled, the visual mismatches became the next target. Several browser behaviors and admin UI patterns gave WebViews away as non-native:
- Zooming: Injected JavaScript disables pinch-to-zoom gestures.
- Text selection: CSS rules prevent long-press text selection in non-input areas.
- Superfluous admin chrome: The Polaris Title component and Page footer are hidden when rendered inside WebViews.
- Polaris overrides: Shared component library styles are adapted to match the app's native design language.
These adjustments brought WebViews much closer to native screens in appearance and interaction patterns—no more accidental zoom or stray selection highlights when swiping through a page.
Two-Way Communication Between Web and Native
Visual polish alone doesn't make a WebView feel native. The real test is whether web and mobile can exchange state and react to user actions fluidly. Shopify built Mobile Bridge on their @remote-ui/rpc library to enable seamless two-way communication between web components and native views.
Moving Title Bars to the Navigation Bar
Native screens put their titles and frequently used actions in system navigation bars, but a classic WebView page renders its own header. Mobile Bridge exposes APIs that let web content set the native title bar and action buttons. The Polaris Page component was updated to forward its title and actions through Mobile Bridge, automatically—no extra web code required per screen.
Navigation Without State Loss
Browsers reload the page on navigation. Native apps push new screens onto a stack. Creating a fresh WebView per navigation destroys session data and dynamic content—a non-starter for most admin workflows.
Shopify solved this with a new component called TransportableView. Instead of building a new WebView for each destination, TransportableView moves the existing WebView instance from one screen to another. The view keeps its state, DOM, and network connections intact, which also makes back navigation trivial since the same instance still exists underneath.
Handling Back Navigation Without Blank Screens
TransportableView solves forward navigation cleanly, but returning to a previous screen risks showing a broken or empty state while the WebView reloads its content. iOS presented additional edge cases around screen previews.
The team's solution: capture a snapshot of the WebView right before it moves. When a user navigates back, a static image occupies the screen exactly as it appeared at move time. Once the real WebView finishes loading, the snapshot is removed and replaced by live content. Users never perceive a flicker, blank state, or content jump.
Native Modal Presentation
Web modals typically overlay the page content, whereas mobile modals are separate full-screen presentations with their own transitions. In the hybrid app, modals are presented as native screens and receive the same TransportableView treatment.
A notable detail: the Polaris Modal component was customized to delay rendering until the native presentation animation completes. Without this delay, web content would appear mid-animation, creating a jarring visual flash.
Going Beyond Web Content
Mobile Bridge didn't stop at making WebViews behave well. It also connected web screens to existing native capabilities. The Date Picker is a representative example: analytics screens are WebViews, and date selection is central to exploring reports. Rather than keeping the web picker, Mobile Bridge routes selection through an already-built native Date Picker component.
Other integrations followed that pattern. Web content can now open native screens and receive results asynchronously. Live examples in the Shopify app include the "Add to Wallet" feature on iOS and Android, and the native Barcode Scanner, which lets merchants scan inventory codes from inside a WebView to auto-fill fields.
What's Next for Mobile Bridge
Today, Mobile Bridge only invokes native UI elements that already exist in the app at release time. That constraint means features need a native app release before web can use them, and older app versions can't pick up new functionality automatically.
Shopify is experimenting with rendering Polaris components natively from web code via their remote-dom project. In this model, business logic stays on the web while UI elements are defined declaratively and rendered natively in the app. The web defines what to show; the app controls how it looks and feels.
This approach would remove the need for native-side pre-implementation and give hybrid apps both web-speed iteration and native-grade user experience.
A Strategic Shift, Not Just a Technical Fix
Mobile Bridge became a standalone library and is being integrated across Shopify products including Balance, POS, and Shop. For engineering teams, the payoff is twofold: development velocity increases because secondary features are built once for web, and the native engineering bandwidth is redirected toward the critical screens that most deserve world-class treatment.
