Apache Cordova — nó là gì, kiến trúc và nguyên lý hoạt động của framework lai

Apache Cordova là gì?

Apache Cordova là một nền tảng mã nguồn mở bao bọc ứng dụng web trong một container native và cung cấp JavaScript API để truy cập các khả năng phần cứng của thiết bị di động. Dự án ban đầu có tên là PhoneGap và được tạo ra bởi Nitobi Software vào năm 2009.

Năm 2011, Adobe mua lại Nitobi và tặng mã nguồn PhoneGap cho Apache Software Foundation, nơi dự án được đổi tên thành Apache Cordova. Adobe tiếp tục phát hành PhoneGap như một bản phân phối của Cordova với các dịch vụ bổ sung, trong khi framework trở thành một dự án độc lập dưới sự quản lý của Apache.

Theo thống kê dự án Apache Cordova (2024), framework hỗ trợ 10 nền tảng di động, bao gồm iOS, Android, Windows, macOS và Electron. Các nền tảng chính vẫn là Android và iOS, chiếm hơn 95% tổng số dự án Cordova.

Kiến trúc Cordova: WebView và cầu nối hoạt động như thế nào

Kiến trúc của Apache Cordova gồm bốn lớp: ứng dụng web, WebView, cầu nối plugin và plugin native. Mỗi lớp được cô lập, cho phép thay thế các thành phần mà không cần thay đổi phần còn lại của hệ thống.

WebView và hiển thị giao diện

WebView trong Cordova là một thành phần hệ thống OS hiển thị trang web như một phần của ứng dụng native. Trên iOS sử dụng WKWebView (từ iOS 9+), trên Android — Android System WebView (từ Android 5+). Framework tải điểm vào index.html với tất cả tài nguyên ứng dụng vào WebView.

Theo WebKit Team (2024), WKWebView tiêu thụ ít bộ nhớ hơn 50% so với UIWebView được sử dụng trong các phiên bản đầu của Cordova. Điều này rất quan trọng đối với các thiết bị di động có RAM hạn chế.

Cầu nối giữa JavaScript và mã native

Cầu nối là cơ chế chính của Cordova cho phép mã JavaScript gọi các hàm native. Khi ứng dụng gọi một plugin, Cordova tuần tự hóa yêu cầu thành JSON và gửi nó qua giao thức URL của WebView (thay đổi location.href với lược đồ tùy chỉnh). Phía native chặn yêu cầu này, thực hiện thao tác cần thiết và trả về kết quả.

Cơ chế này hoạt động bất đồng bộ: lời gọi plugin trả về một Promise được giải quyết sau khi hoàn thành thao tác native. Theo các thử nghiệm của IBM Research (2023), độ trễ của cầu nối là 2–5 ms cho các thao tác đơn giản và tối đa 50 ms cho các thao tác I/O.

Plugin native

Mỗi plugin Cordova là một gói với giao diện JavaScript và triển khai native cho từng nền tảng. Trên iOS, plugin được viết bằng Objective-C hoặc Swift, trên Android — bằng Java hoặc Kotlin. Phần JavaScript của plugin cung cấp cho nhà phát triển API dựa trên Promise, trong khi phần native thực hiện các lời gọi hệ thống.

Bộ tiêu chuẩn bao gồm hơn 30 plugin: Battery Status, Camera, Contacts, Device Motion, File, Geolocation, InAppBrowser, Media, Network Information, Splashscreen, Statusbar, Vibration và các plugin khác.

Cordova CLI và hệ thống quản lý plugin

Dòng lệnh Cordova CLI là công cụ chính để tạo, xây dựng và quản lý các dự án. Nó cung cấp các lệnh để khởi tạo dự án, thêm nền tảng và cài đặt plugin thông qua một giao diện thống nhất.

Quy trình làm việc bao gồm ba lệnh cơ bản: cordova create để tạo dự án, cordova platform add ios/android để thêm nền tảng mục tiêu và cordova plugin add để cài đặt plugin từ kho lưu trữ npm.

• cordova create — tạo cấu trúc dự án với www/, hooks/ và config.xml
• cordova platform add — tải xuống và cấu hình các dự án native cho iOS hoặc Android
• cordova plugin add — cài đặt plugin và đăng ký nó trong cấu hình dự án
• cordova build — biên dịch ứng dụng thành APK hoặc IPA qua Xcode và Android Studio

Tất cả cài đặt dự án được lưu trữ trong tệp config.xml trong thư mục gốc. Nó chứa tên ứng dụng, mã định danh gói, hướng màn hình được hỗ trợ, biểu tượng và danh sách các plugin đã cài đặt. Tệp sử dụng định dạng XML W3C Widget Package, cho phép tích hợp dự án với bất kỳ công cụ xây dựng nào, bao gồm hệ thống CI/CD Jenkins và GitHub Actions.

Ví dụ mã: plugin và cấu hình

Hãy xem xét một ví dụ về tệp cấu hình config.xml cho dự án Cordova hỗ trợ máy ảnh và định vị địa lý.

<?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>
        Ví dụ ứng dụng Cordova
    </description>
    <plugin name='cordova-plugin-camera' />
    <plugin name='cordova-plugin-geolocation' />
    <allow-intent href='http://*/*' />
    <allow-intent href='https://*/*' />
</widget>

Tệp config.xml này khai báo các plugin máy ảnh và định vị, đồng thời cho phép kết nối HTTP/HTTPS để tải dữ liệu từ máy chủ. Cordova tự động kết nối chúng trong quá trình xây dựng và làm cho chúng có thể truy cập thông qua các đối tượng toàn cục navigator.camera và navigator.geolocation.

Ví dụ gọi plugin máy ảnh từ mã JavaScript của ứng dụng:

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

Hàm capturePhoto gọi máy ảnh native thông qua plugin cordova-plugin-camera. Callback thành công nhận ảnh ở định dạng base64, sau đó ảnh được hiển thị trên trang. Xử lý lỗi là bắt buộc — người dùng có thể từ chối yêu cầu truy cập máy ảnh.

Hạn chế của Cordova và chuyển sang Capacitor

Mặc dù phổ biến, Apache Cordova có một số hạn chế dẫn đến sự xuất hiện của Capacitor, một giải pháp thay thế từ nhóm Ionic. Các vấn đề chính liên quan đến hiệu suất cầu nối, hỗ trợ các tiêu chuẩn web hiện đại và độ phức tạp khi gỡ lỗi.

Cầu nối qua giao thức URL của WebView chậm hơn cầu nối JavaScript trực tiếp trong Capacitor. Khi gọi thường xuyên các API native, chẳng hạn như khi làm việc với máy ảnh theo thời gian thực, sự khác biệt này trở nên rõ rệt. Cordova cũng không hỗ trợ đầy đủ các khả năng WebView hiện đại mà không có plugin bổ sung.

Một hạn chế khác là thiếu hỗ trợ Live Reload tích hợp trên thiết bị mà không có công cụ bên thứ ba. Phát triển với Cordova yêu cầu xây dựng lại dự án sau mỗi lần thay đổi mã, làm chậm chu kỳ phát triển so với Capacitor hoặc React Native.

Theo nhóm Ionic (2024), hơn 60% các dự án lai mới chọn Capacitor thay vì Cordova. Tuy nhiên, các dự án Cordova hiện có vẫn hoạt động được — framework tiếp tục nhận các bản cập nhật bảo mật từ Apache Software Foundation.

Hệ sinh thái Cordova: PhoneGap, Monaca và các nền tảng khác

Apache Cordova đã trở thành nền tảng cho một số nền tảng và dịch vụ thương mại mở rộng chức năng của nó và cung cấp các công cụ phát triển bổ sung. PhoneGap của Adobe là bản phân phối đầu tiên và nổi tiếng nhất của Cordova.

PhoneGap bổ sung dịch vụ đám mây PhoneGap Build, cho phép biên dịch ứng dụng mà không cần cài đặt Xcode hay Android Studio. Nhà phát triển tải mã nguồn lên máy chủ Adobe và nhận được các tệp APK và IPA sẵn sàng. Điều này đặc biệt thuận tiện cho các nhóm không có cơ sở hạ tầng Mac.

Các nền tảng khác dựa trên Cordova bao gồm Monaca (IDE đám mây) và Framework7. Monaca cung cấp môi trường phát triển đầy đủ trong trình duyệt với trình mô phỏng thiết bị và tích hợp plugin Cordova. Framework7 sử dụng Cordova làm phần phía sau để kết xuất, cung cấp bộ thành phần giao diện người dùng riêng.

Mặc dù mức độ phổ biến của Cordova giảm sau khi Flutter và React Native ra mắt, hệ sinh thái vẫn còn phù hợp cho việc duy trì các dự án kế thừa và các tình huống thích hợp mà việc dễ dàng tiếp cận cho các nhà phát triển web là rất quan trọng. Các ứng dụng doanh nghiệp với yêu cầu truy cập phần cứng không điển hình thường giữ lại trên Cordova do thư viện phong phú các plugin đã được kiểm chứng.

Để di chuyển từ Cordova sang Capacitor, có hướng dẫn từng bước từ nhóm Ionic bao gồm thay thế các tập lệnh khởi tạo trong index.html và cập nhật cấu hình. Thách thức chính là kiểm tra khả năng tương thích của các plugin Cordova tùy chỉnh với kiến trúc cầu nối Capacitor mới.