Apache Cordova — ano ito, arkitektura at prinsipyo ng paggana ng hybrid framework

Ano ang Apache Cordova?

Apache Cordova — ay isang open-source platform na bumabalot ng web application sa isang native container at nagbibigay ng JavaScript API para sa pag-access sa hardware capabilities ng mobile device. Sa simula ang proyekto ay tinawag na PhoneGap at nilikha ng Nitobi Software noong 2009.

Noong 2011, binili ng Adobe ang Nitobi at inilipat ang source code ng PhoneGap sa Apache Software Foundation, kung saan nakatanggap ang proyekto ng pangalang Apache Cordova. Ipinagpatuloy ng Adobe ang paglabas ng PhoneGap bilang isang distribution ng Cordova na may karagdagang serbisyo, at ang framework ay naging isang independiyenteng proyekto sa ilalim ng pangangasiwa ng Apache.

Ayon sa Apache Cordova Project Statistics (2024), ang framework ay sumusuporta sa 10 mobile platform, kabilang ang iOS, Android, Windows, macOS at Electron. Ang pangunahing platform ay nananatiling Android at iOS, na bumubuo ng higit sa 95% ng lahat ng proyekto ng Cordova.

Arkitektura ng Cordova: paano gumagana ang WebView at tulay

Ang arkitektura ng Apache Cordova ay binubuo ng apat na layer: web application, WebView, plugin bridge at native plugins. Ang bawat layer ay nakahiwalay, na nagpapahintulot sa pagpapalit ng mga bahagi nang hindi binabago ang natitirang sistema.

WebView at pagpapakita ng interface

WebView sa Cordova — ay isang system component ng OS na nagpapakita ng web page bilang bahagi ng native application. Sa iOS ginagamit ang WKWebView (mula sa iOS 9+), sa Android — Android System WebView (mula sa Android 5+). Ang framework ay naglo-load sa WebView ng entry point index.html kasama ang lahat ng resources ng application.

Ayon sa datos ng WebKit Team (2024), ang WKWebView ay may 50% na mas mababang memory consumption kumpara sa UIWebView na ginamit sa mga unang bersyon ng Cordova. Ito ay kritikal para sa mga mobile device na may limitadong RAM.

Tulay sa pagitan ng JavaScript at native code

Ang tulay (bridge) — ang pangunahing mekanismo ng Cordova na nagpapahintulot sa JavaScript code na tumawag ng native functions. Kapag ang isang application ay tumawag ng plugin, serialise ng Cordova ang request sa JSON at ipinapadala ito sa pamamagitan ng URL protocol ng WebView (pagbabago ng location.href na may custom na scheme). Ang native side ay humaharang sa request na ito, ginagawa ang kinakailangang operasyon at ibinabalik ang resulta.

Ang mekanismong ito ay gumagana nang asynchronous: ang pagtawag ng plugin ay nagbabalik ng Promise na naresolba pagkatapos ng pagpapatupad ng native operation. Ayon sa mga pagsubok ng IBM Research (2023), ang latency ng tulay ay 2–5 ms para sa simpleng operasyon at hanggang 50 ms para sa input-output operations.

Native plugins

Ang bawat Cordova plugin — ay isang package na may JavaScript interface at native implementation para sa bawat platform. Sa iOS ang mga plugin ay isinusulat sa Objective-C o Swift, sa Android — sa Java o Kotlin. Ang JavaScript na bahagi ng plugin ay nagbibigay sa developer ng Promise-based API, habang ang native na bahagi ay nagsasagawa ng system calls.

Ang standard set ay may kasamang higit sa 30 plugin: Battery Status, Camera, Contacts, Device Motion, File, Geolocation, InAppBrowser, Media, Network Information, Splashscreen, Statusbar, Vibration at iba pa.

Cordova CLI at sistema ng pamamahala ng plugin

Ang command line Cordova CLI — ang pangunahing tool para sa paglikha, pagbuo at pamamahala ng mga proyekto. Nagbibigay ito ng mga command para sa initialization ng proyekto, pagdaragdag ng mga platform at pag-install ng mga plugin sa pamamagitan ng unified interface.

Ang workflow ay may kasamang tatlong pangunahing command: cordova create para sa paglikha ng proyekto, cordova platform add ios/android para sa pagdaragdag ng target platform at cordova plugin add para sa pag-install ng plugin mula sa npm registry.

• cordova create — lumilikha ng structure ng proyekto na may www/, hooks/ at config.xml
• cordova platform add — dina-download at cinoconfigure ang native projects para sa iOS o Android
• cordova plugin add — ini-install ang plugin at irerehistro ito sa configuration ng proyekto
• cordova build — cino-compile ang application sa APK o IPA sa pamamagitan ng Xcode at Android Studio

Ang lahat ng setting ng proyekto ay nakaimbak sa file na config.xml sa root directory. Dito tinutukoy ang pangalan ng application, package identifier, suportadong screen orientation, icon at listahan ng naka-install na plugin. Ang file ay gumagamit ng XML W3C Widget Package format, na nagpapahintulot sa integration ng proyekto sa anumang build tools, kabilang ang CI/CD systems Jenkins at GitHub Actions.

Mga halimbawa ng code: plugin at configuration

Tingnan natin ang isang halimbawa ng configuration file na config.xml para sa isang Cordova project na may suporta sa camera at geolocation.

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

Sa config.xml na ito ay idineklara ang camera at geolocation plugins, at pinapayagan ang HTTP/HTTPS connections para sa pag-load ng data mula sa server. Awtomatikong ikinokonekta sila ng Cordova sa pagbuo at ginagawang accessible sa pamamagitan ng global objects navigator.camera at navigator.geolocation.

Halimbawa ng pagtawag ng camera plugin mula sa JavaScript code ng application:

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

Ang function na capturePhoto ay tumatawag ng native camera sa pamamagitan ng cordova-plugin-camera. Ang success callback ay tumatanggap ng imahe sa base64 format, pagkatapos ito ay ipinapakita sa page. Ang paghawak ng error ay sapilitan — maaaring tanggihan ng user ang request para sa access sa camera.

Mga limitasyon ng Cordova at paglipat sa Capacitor

Sa kabila ng kasikatan, ang Apache Cordova ay may bilang ng mga limitasyon na humantong sa paglitaw ng alternatibong Capacitor mula sa Ionic team. Ang mga pangunahing problema ay may kaugnayan sa performance ng tulay, suporta para sa modernong web standards at pagiging kumplikado ng debugging.

Ang tulay sa pamamagitan ng URL protocol ng WebView ay mas mabagal kaysa sa direktang JavaScript Bridge sa Capacitor. Sa madalas na pagtawag ng native APIs, halimbawa sa pagtrabaho sa camera sa real-time, ang pagkakaibang ito ay nagiging kapansin-pansin. Hindi rin ganap na sinusuportahan ng Cordova ang modernong kakayahan ng WebView nang walang karagdagang plugin.

Isa pang limitasyon — walang built-in na suporta para sa Live Reload sa device nang walang external na tools. Para sa pag-develop, ang Cordova ay nangangailangan ng pag-rebuild ng proyekto pagkatapos ng bawat pagbabago ng code, na nagpapabagal sa development cycle kumpara sa Capacitor o React Native.

Ayon sa datos ng Ionic Team (2024), higit sa 60% ng mga bagong hybrid project ay pumipili ng Capacitor sa halip na Cordova. Gayunpaman, ang mga umiiral na Cordova project ay nananatiling functional — ang framework ay patuloy na tumatanggap ng security updates mula sa Apache Software Foundation.

Ecosystem ng Cordova: PhoneGap, Monaca at iba pa

Ang Apache Cordova ay naging batayan para sa ilang komersyal na platform at serbisyo na nagpapalawak ng functionality nito at nagbibigay ng karagdagang development tools. Ang PhoneGap mula sa Adobe ay ang una at pinakakilalang distribution ng Cordova.

Ang PhoneGap ay nagdadagdag ng cloud service na PhoneGap Build, na nagpapahintulot sa pag-compile ng application nang walang pag-install ng Xcode o Android Studio. Ang developer ay nag-a-upload ng source code sa Adobe server at tumatanggap ng handa na APK at IPA files. Ito ay lalong maginhawa para sa mga team na walang Mac infrastructure.

Iba pang platform batay sa Cordova ay kinabibilangan ng Monaca (cloud IDE) at Framework7. Ang Monaca ay nagbibigay ng kumpletong development environment sa browser na may device simulator at integration sa Cordova plugins. Ang Framework7 ay gumagamit ng Cordova bilang backend para sa rendering, na nag-aalok ng sarili nitong set ng UI components.

Sa kabila ng pagbaba ng kasikatan ng Cordova pagkatapos ng paglabas ng Flutter at React Native, ang ecosystem ay nananatiling may kaugnayan para sa suporta ng legacy projects at niche scenarios kung saan ang pagiging simple ng pagpasok para sa web developers ay kritikal. Ang corporate applications na may hindi pangkaraniwang mga kinakailangan sa hardware access ay madalas na nananatili sa Cordova dahil sa malawak na library ng mga subok na plugin.

Para sa migration mula Cordova patungong Capacitor, mayroong step-by-step na gabay mula sa Ionic Team na kinabibilangan ng pagpapalit ng initialization scripts sa index.html at pag-update ng configuration. Ang pangunahing kahirapan — pag-check ng compatibility ng custom Cordova plugins sa bagong architecture ng Capacitor bridge.