Mobile Bridge：让 WebView 拥有原生体验

正文

请到「今天看啥」查看全文

• 让 WebView 更快
• 让 WebView 看起来像原生界面
• 让 WebView 用起来像原生界面

1、让 WebView 更快 🚀

我们首先着手找出 WebView 为什么加载缓慢。结果发现，主要问题出在认证流程上。每次加载 Web 页面时，WebView 都要经过好几次跳转来完成身份验证，这就导致了明显的延迟。

为了解决这个问题，我们提出了一个简单的方案：在应用启动时，就在后台预加载并完成 WebView 的身份认证。

为此，我们分别为 iOS 和 Android 构建了原生模块，可以实现以下功能：

• 在后台预加载 WebView（无需等待）
• 使用过的 WebView 不再丢弃，而是保留在缓存中
• 重复利用缓存的 WebView，用户就不会再遇到无谓的等待

通过这种方式，我们将 WebView 的加载时间提升了大约 6 倍 ——P75（75% 用户体验到的加载时间）从 6 秒缩短到 1.4 秒，这其中包括了网络延迟和页面渲染时间。

左图为优化前，右图为优化后

2、让 WebView 看起来更像原生界面

在解决了性能问题之后，我们开始着手提升 WebView 的外观和使用感受，重点是去除那些让它看起来不像原生界面的元素。我们主要改进了以下几个方面：

• 缩放功能：我们通过注入 JavaScript 来禁用页面缩放功能。
• 文本选择：通过添加 CSS 样式，取消了文本可选中功能。
• 不必要的界面元素：我们隐藏了 WebView 中一些在移动端不需要的后台管理界面组件，比如标题组件（Title component）和页面底部（Page footer）。
• Polaris 样式覆盖：我们对 Polaris（Shopify 的 UI 组件库）中的组件进行了样式调整，使它们在视觉上更贴合原生应用的设计风格。

经过这些改进，我们的 WebView 在视觉风格和交互方式上更加接近原生界面，遵循了统一的用户体验设计标准。

请到「今天看啥」查看全文