Mobile Bridge: Making WebViews Feel Native

Learn 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.

Shopify logo
Shopify
•
Mauricio de Meirelles
•8 min read•beginner•
--
•View Original
CachingJavaScriptModalReact

Overview

The article discusses Mobile Bridge, a framework developed by Shopify to enhance WebViews in their mobile app, making them feel more native. It addresses the challenges of traditional WebViews, focusing on improving performance, appearance, and integration with native components.

What You'll Learn

1

How to preload and authenticate WebViews in the background to improve load times

2

Why integrating native UI elements into WebViews enhances user experience

3

How to implement TransportableView for seamless navigation between screens

4

When to use Mobile Bridge for hybrid app development

Prerequisites & Requirements

  • Understanding of WebViews and mobile app architecture
  • Familiarity with native development tools for iOS and Android(optional)

Key Questions Answered

How does Mobile Bridge improve WebView performance?
Mobile Bridge enhances WebView performance by preloading and authenticating them in the background, reducing load times by approximately 6x, from 6 seconds to 1.4 seconds. This approach minimizes delays caused by authentication redirects, leading to a smoother user experience.
What techniques were used to make WebViews look more native?
To make WebViews look more native, Shopify removed unnecessary UI elements, disabled zooming and text selection, and adapted Polaris components to match the app's design. These changes helped align the WebView appearance with native screens, enhancing user familiarity.
What is the purpose of the TransportableView component?
The TransportableView component allows existing WebViews to be moved between screens without losing state or data, thus maintaining user session continuity. This prevents disruptions during navigation, providing a more integrated experience within the app.
How does Mobile Bridge facilitate communication between web and mobile components?
Mobile Bridge uses Shopify’s @remote-ui/rpc library to enable two-way communication between web and mobile components. This allows for data sharing and event tracking, ensuring that both platforms can react to user actions seamlessly.

Key Statistics & Figures

WebView load time improvement
from 6 seconds to 1.4 seconds
This improvement was achieved by preloading and authenticating WebViews in the background.

Technologies & Tools

Framework
Mobile Bridge
Enhances WebViews to integrate seamlessly with native mobile components.
Library
@remote-ui/Rpc
Facilitates two-way communication between web and mobile components.
UI Component Library
Polaris
Provides components that were adapted for use in WebViews to match native design.

Key Actionable Insights

1
Implement preloading and background authentication for WebViews to significantly enhance performance.
By preloading WebViews, you can reduce load times drastically, which is crucial for maintaining user engagement in mobile applications.
2
Adapt UI components to ensure consistency between WebViews and native screens.
This helps in creating a seamless user experience, making the application feel more cohesive and professional.
3
Utilize TransportableView for managing navigation states effectively.
This approach ensures that users do not lose their session data while navigating, which is essential for maintaining a smooth user experience.

Common Pitfalls

1
Neglecting to preload WebViews can lead to poor user experience due to slow load times.
This happens because users expect instant access to content. Preloading helps mitigate this issue by ensuring that WebViews are ready when needed.
2
Failing to adapt UI elements in WebViews can make them feel disconnected from the native app.
If WebViews retain web-specific UI elements, users may feel like they are using a different application, which can lead to confusion and frustration.

Related Concepts

Webview Optimization
Hybrid App Development
Mobile UI/UX Design