主要观点总结
文章介绍了Shopify如何解决传统WebView所面临的性能、外观和集成性问题，并如何通过Mobile Bridge框架增强WebView，使其无缝融入移动应用。文章还提到了Mobile Bridge如何成为Shopify移动开发策略中的关键工具，并帮助加速向React Native的迁移。
关键观点总结
关键观点1: WebView的三大核心问题
性能、外观和集成性是WebView面临的三大核心问题。性能问题主要表现为加载缓慢；外观问题主要是与原生界面风格不一致，容易让人感觉脱节；集成性问题则是Web与移动端之间的通信困难。
关键观点2: Mobile Bridge框架的创建目的
Mobile Bridge框架的创建旨在增强WebView，解决其面临的问题，使网页内容可以无缝融入移动应用，提供接近原生的流畅体验。
关键观点3: WebView性能问题的解决方案
为了解决WebView加载缓慢的问题，Shopify采取了预加载和缓存WebView的策略，通过构建原生模块实现后台预加载和缓存的利用，将WebView的加载时间提升了大约6倍。
关键观点4: WebView外观改进
Shopify通过禁用页面缩放功能、取消文本可选中功能、隐藏不必要的界面元素以及对Polaris样式进行调整，使WebView在视觉风格和交互方式上更加接近原生界面。
关键观点5: Mobile Bridge框架的功能
Mobile Bridge框架实现了Web与移动端之间的简单通信，使它们能够轻松地共享数据、追踪用户操作，并快速做出响应。此外，还通过设计API和处理标题栏、导航、弹窗等问题，使WebView用起来更像原生应用。
关键观点6: Mobile Bridge的未来发展
Shopify正在尝试使用remote-dom技术，让Polaris组件可以通过Web代码在App中以原生方式渲染，以进一步提升混合应用的用户体验。同时，Mobile Bridge已经开源并整合到Shopify的其他产品中，意味着更多应用也能采用这种强大的混合开发模式。
正文
为此，我们分别为 iOS 和 Android 构建了原生模块，可以实现以下功能：
-
-
使用过的 WebView 不再丢弃，而是保留在缓存中
-
重复利用缓存的 WebView，用户就不会再遇到无谓的等待
通过这种方式，我们将 WebView 的加载时间提升了大约 6 倍 ——P75（75% 用户体验到的加载时间）从 6 秒缩短到 1.4 秒，这其中包括了网络延迟和页面渲染时间。
左图为优化前，右图为优化后
2、让 WebView 看起来更像原生界面
在解决了性能问题之后，我们开始着手提升 WebView 的外观和使用感受，重点是去除那些让它看起来不像原生界面的元素。我们主要改进了以下几个方面：
-
缩放功能：我们通过注入 JavaScript 来禁用页面缩放功能。
-
文本选择：通过添加 CSS 样式，取消了文本可选中功能。
-
不必要的界面元素：我们隐藏了 WebView 中一些在移动端不需要的后台管理界面组件，比如标题组件（Title component）和页面底部（Page footer）。
-
Polaris 样式覆盖：我们对 Polaris（Shopify 的 UI 组件库）中的组件进行了样式调整，使它们在视觉上更贴合原生应用的设计风格。
经过这些改进，我们的 WebView 在视觉风格和交互方式上更加接近原生界面，遵循了统一的用户体验设计标准。
优化前（左）与优化后（右）对比图
3、让 WebView 用起来更像原生界面
想要让 WebView 真正 “用起来像原生应用”，关键是要实现 Web 与移动端之间的简单通信。它们需要能够轻松地共享数据、追踪用户操作，并快速做出响应，比如知道用户何时导航、完成了什么操作，或者页面发生了哪些变化。
为此，我们开发了 Mobile Bridge 框架，它基于 Shopify 的 @remote-ui/rpc 库，能够在 Web 与移动端之间建立顺畅的双向通信通道。
【第3446期】Midscene.js：AI 驱动的 UI 自动化框架
解决页面标题和操作问题
我们首先处理的是标题栏的问题。在原生应用中，页面的标题和操作按钮（如 “保存”、“编辑”）通常显示在导航栏，而不是页面本身。为了让 WebView 与这一原生模式一致，我们在 Mobile Bridge 中设计了可以设置标题栏和操作按钮的 API。
