Apache Cordova — 什么是混合框架的架构和工作原理

什么是 Apache Cordova？

Apache Cordova 是一个开源平台，它将 Web 应用程序包装在原生容器中，并提供 JavaScript API 以访问移动设备的硬件功能。该项目最初名为 PhoneGap，由 Nitobi Software 于 2009 年创建。

2011 年，Adobe 收购了 Nitobi，并将 PhoneGap 的源代码移交给了 Apache Software Foundation，该项目在此更名为 Apache Cordova。Adobe 继续将 PhoneGap 作为 Cordova 的分发版发布，附带额外服务，而该框架则成为 Apache 管理下的独立项目。

根据 Apache Cordova Project Statistics (2024)，该框架支持 10 个移动平台，包括 iOS、Android、Windows、macOS 和 Electron。主要平台仍然是 Android 和 iOS，它们占所有 Cordova 项目的 95% 以上。

Cordova 架构：WebView 和桥梁如何工作

Apache Cordova 的架构由四层组成：Web 应用程序、WebView、插件桥和原生插件。每层都是隔离的，允许在不更改系统其余部分的情况下更换组件。

WebView 和界面显示

WebView 在 Cordova 中是一个操作系统系统组件，它将网页作为原生应用程序的一部分显示。在 iOS 上使用 WKWebView（iOS 9+ 起），在 Android 上使用 Android System WebView（Android 5+ 起）。该框架将入口点 index.html 及所有应用程序资源加载到 WebView 中。

根据 WebKit Team (2024) 的数据，WKWebView 与早期 Cordova 版本中使用的 UIWebView 相比，内存消耗减少 50%。这对于内存有限的移动设备至关重要。

JavaScript 和原生代码之间的桥梁

桥梁（bridge）是 Cordova 的关键机制，允许 JavaScript 代码调用原生函数。当应用程序调用插件时，Cordova 将请求序列化为 JSON，并通过 WebView 的 URL 协议（使用自定义方案更改 location.href）发送。原生端拦截此请求，执行所需操作并返回结果。

此机制异步工作：插件调用返回一个 Promise，该 Promise 在原生操作执行后得到解决。根据 IBM Research (2023) 的测试，简单操作的桥梁延迟为 2-5 毫秒，I/O 操作延迟高达 50 毫秒。

原生插件

每个 Cordova 插件都是一个包含 JavaScript 接口和每个平台的原生实现的包。在 iOS 上，插件用 Objective-C 或 Swift 编写，在 Android 上用 Java 或 Kotlin 编写。插件的 JavaScript 部分为开发人员提供基于 Promise 的 API，而原生部分执行系统调用。

标准集包含超过 30 个插件：Battery Status、Camera、Contacts、Device Motion、File、Geolocation、InAppBrowser、Media、Network Information、Splashscreen、Statusbar、Vibration 等。

Cordova CLI 和插件管理系统

Cordova CLI 命令行是创建、构建和管理项目的主要工具。它通过统一界面提供初始化项目、添加平台和安装插件的命令。

工作流程包括三个基本命令：cordova create 用于创建项目，cordova platform add ios/android 用于添加目标平台，cordova plugin add 用于从 npm 注册表安装插件。

• cordova create — 创建包含 www/、hooks/ 和 config.xml 的项目结构
• cordova platform add — 下载并配置 iOS 或 Android 的原生项目
• cordova plugin add — 安装插件并在项目配置中注册
• cordova build — 通过 Xcode 和 Android Studio 将应用程序编译为 APK 或 IPA

所有项目设置都存储在根目录的 config.xml 文件中。其中指定了应用程序名称、包标识符、支持的屏幕方向、图标和已安装插件列表。该文件使用 XML W3C Widget Package 格式，允许项目与任何构建工具集成，包括 Jenkins 和 GitHub Actions 的 CI/CD 系统。

代码示例：插件和配置

让我们看一个支持相机和地理位置的 Cordova 项目的配置示例文件 config.xml。

<?xml version='1.0' encoding='utf-8'?>
<widget id='com.example.app'
        version='1.0.0'
        xmlns='http://www.w3.org/ns/widgets'
        xmlns:cdv='http://cordova.apache.org/ns/1.0'>
    <name>MyApp</name>
    <description>
        Cordova 应用程序示例
    </description>
    <plugin name='cordova-plugin-camera' />
    <plugin name='cordova-plugin-geolocation' />
    <allow-intent href='http://*/*' />
    <allow-intent href='https://*/*' />
</widget>

在此 config.xml 中声明了相机和地理位置插件，并允许 HTTP/HTTPS 连接以从服务器加载数据。Cordova 在构建时自动连接它们，并通过全局对象 navigator.camera 和 navigator.geolocation 使其可访问。

从应用程序的 JavaScript 代码调用相机插件的示例：

function capturePhoto() {
  navigator.camera.getPicture(
    function(imageData) {
      const img = document.getElementById('myImage');
      img.src = 'data:image/jpeg;base64,' + imageData;
    },
    function(error) {
      console.error('相机错误:' + error);
    },
    { quality: 50, destinationType: 0 }
  );
}

capturePhoto 函数通过 cordova-plugin-camera 插件调用原生相机。成功的回调以 base64 格式接收图像，然后将其显示在页面上。错误处理是强制性的——用户可以拒绝相机访问请求。

Cordova 的局限性及迁移到 Capacitor

尽管很受欢迎，但 Apache Cordova 存在一些局限性，导致出现了来自 Ionic 团队的替代方案 Capacitor。主要问题与桥梁性能、现代 Web 标准支持以及调试复杂性有关。

通过 WebView URL 协议的桥梁比 Capacitor 中的直接 JavaScript Bridge 更慢。在频繁调用原生 API 时，例如在使用实时相机时，这种差异变得明显。Cordova 在没有额外插件的情况下也无法完全支持 WebView 的现代功能。

另一个局限性是——在没有外部工具的情况下，设备上缺乏 Live Reload 的内置支持。对于开发，Cordova 需要在每次代码更改后重建项目，与 Capacitor 或 React Native 相比，这减慢了开发周期。

根据 Ionic Team (2024) 的数据，超过 60% 的新混合项目选择 Capacitor 而非 Cordova。然而，现有的 Cordova 项目仍然可用——该框架继续接收来自 Apache Software Foundation 的安全更新。

Cordova 生态系统：PhoneGap、Monaca 等

Apache Cordova 已成为多个商业平台和服务的基础，这些平台和服务扩展了其功能并提供了额外的开发工具。来自 Adobe 的 PhoneGap 是第一个也是最著名的 Cordova 分发版。

PhoneGap 添加了云服务 PhoneGap Build，允许在无需安装 Xcode 或 Android Studio 的情况下编译应用程序。开发人员将源代码上传到 Adobe 服务器并获得现成的 APK 和 IPA 文件。这对于没有 Mac 基础设施的团队尤其方便。

其他基于 Cordova 的平台包括 Monaca（云 IDE）和 Framework7。Monaca 在浏览器中提供完整的开发环境，包含设备模拟器和 Cordova 插件集成。Framework7 使用 Cordova 作为渲染后端，提供自己的 UI 组件集。

尽管在 Flutter 和 React Native 发布后 Cordova 的受欢迎程度有所下降，但其生态系统对于传统项目的支持和 Web 开发人员入门简单性至关重要的特定场景仍然具有相关性。具有不寻常硬件访问要求的企业应用程序通常由于经过验证的插件的广泛库而继续使用 Cordova。

有关从 Cordova 迁移到 Capacitor 的迁移指南由 Ionic Team 提供，包括替换 index.html 中的初始化脚本和更新配置。主要困难在于检查自定义 Cordova 插件与 Capacitor 桥梁新架构的兼容性。