为移动应用构建更好的 Web 视图

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

Web Views 是移动应用中最广泛使用的组件之一，原因很简单：大多数应用在某个时候都需要集成一些内部或外部 Web 体验。

因此，苹果和谷歌都提供了基本的 Web View 控件：iOS 提供了WKWebView，Android 提供了WebView（Android 上还有其他选项，但这是大多数应用程序使用的主要控件）。

遗憾的是，使用这些 Web View 并非易事，原生开发者每次需要在应用中使用这些 Web View 时，都不得不重复造轮子。幸运的是，这种痛苦即将结束。请继续阅读，了解我们为 iOS 和 Android 原生应用开发者打造的更便捷的 Web View。

Web视图的使用案例

Web View 在许多应用中都扮演着重要角色。有些应用完全围绕单个主 Web View 实例构建，而其他传统的原生应用则会选择性地显示和嵌入 Web View，以引入 Web 体验。

对于那些大部分功能和内容都构建在 Web 视图中的应用来说，Web 视图的用途显而易见。我不想在这里过多赘述这种用途，但像Capacitor和Ionic Framework这样的工具在这方面表现出色，并且应用广泛。

对于传统的原生应用而言，嵌入 Web 体验的用例可能多种多样，从嵌入现有的 Web 体验（例如抵押贷款申请或调查），到显示基于 Web 的身份验证表单，再到在移植到原生应用之前托管原型 Web 体验。

一般来说，公司越成熟，其网站开发团队规模越大，公司在网络上的知名度越高，就越有可能在某个时候需要将网站体验引入其移动应用程序。

如今Web视图存在的问题

一般来说，苹果和谷歌提供的 Web View 功能简陋，非常基础。我们采访过的几乎所有原生开发者都表示，他们很反感扩展默认 Web View 控件，然后还要维护一套相当复杂的代码来在应用中托管 Web 体验。因此，默认 Web View 的问题在于它们功能不足，无法满足原生开发者通常的需求。

作为Capacitor的创建者，我对此有着切身体会。Capacitor本质上是一个功能强大的 Web View，用于托管需要与现有原生代码交互的 Web 应用程序。Capacitor 由数万行代码组成，它封装了各个平台上可用的核心 Web View，并添加了许多功能，例如：

• 一个用于添加新的原生“插件”的 API，这些插件基于自定义原生代码向 Web 开发人员公开新的 Web API，并且以受控的方式使用 Web 开发人员认可的 API（Promise、TypeScript 等）来实现。
• 一个高性能的桥接器，用于在 Web 和原生应用之间进行通信，跟踪调用情况并将结果返回给调用方。
• 处理对资源的引用，以便离线托管 Web 内容，并正确地为 Web HTML 控件（如视频和音频）传输数据（出乎意料地棘手）。
• 在原生层和 Web 层之间进行数据编组
• 管理诸如警告对话框、键盘、状态栏、滚动区域等原生元素……同时还要正确处理屏幕方向变化
• 处理导航、加载、错误、权限请求和其他一般性维护的委托方法。
• 通过动态且非同步的方式更新嵌入式 Web 体验，以适应较慢的原生发布周期。

然后还要在 iOS 和 Android 上同时实现（Android 平台需要的代码更多，复杂度更高）。而且这还远非全部！

似乎每个规模较大的原生应用最终都会实现上述功能的一部分，这可不是一件容易的事！

构建更好的 Web 视图

由于构建一个具有上述功能的健壮的 Web View 包装器需要非常复杂的技术，因此 Capacitor 的第一个版本花了几个月的时间才构建完成，我再也不想让其他开发者经历这种痛苦了。

遗憾的是，如今几乎所有原生应用开发者都不得不经历这些，而且还要维护一大堆复杂的自定义代码。而他们原本只需导入一个稳定、维护良好、功能丰富的 Web View 控件，就能重新专注于应用开发的乐趣。

当我们意识到 Capacitor 的功能可以提取出来帮助世界各地的原生应用开发者时，我们就知道我们找到了方向：一个更好的原生应用 Web View。

宣布推出 Ionic Portals

我们一直致力于将 Capacitor 背后的 Web View 技术带给世界各地的原生应用程序和原生开发人员，今天我们将推出该产品的第一个版本：Ionic Portals。

Ionic Portals 是一个适用于原生应用的即插即用型 Web View 组件，它解决了在原生应用中使用 Web View 时所有繁琐且令人头疼的问题。开发者可以通过不同的“门户”托管多个不同的 Web 体验，并将它们隔离，选择性地公开每个体验所需的自定义原生功能。团队可以远程动态更新和部署新的 Web 体验，从而实时部署新功能和测试，而不会中断原生应用的发布流程。

Ionic Portals 使用了与 Burger King、Paylocity、H&R Block、Aflac 等主要消费者应用程序目前部署的相同技术，但它是以插入式控件的形式分发给现有原生应用程序的。

除此之外，Ionic Portals 由我们维护和支持，因此您的应用程序中就少了一个需要维护的组件。

我们目前正在与一些团队合作，他们迫切希望在原生应用中拥有更强大的 Web View 控件。如果您有兴趣试用并分享您的反馈，欢迎与我们联系。访问Ionic Portals 页面，观看演示并了解我们为原生应用大幅改进的 Web View 的更多详情。