Apache Cordova — ما هو، البنية المعمارية وكيف يعمل الإطار الهجين

ما هو Apache Cordova؟

Apache Cordova هي منصة مفتوحة المصدر تغلف تطبيق الويب في حاوية أصلية وتوفر API لجافا سكريبت للوصول إلى إمكانيات أجهزة الجهاز المحمول. كان المشروع يُسمى في الأصل PhoneGap وأنشأته شركة Nitobi Software في عام 2009.

في عام 2011، استحوذت Adobe على Nitobi وساهمت بكود مصدر PhoneGap لمؤسسة Apache Software Foundation، حيث حصل المشروع على اسم Apache Cordova. استمرت Adobe في إصدار PhoneGap كتوزيعة لـ Cordova مع خدمات إضافية، بينما أصبح الإطار نفسه مشروعاً مستقلاً تحت إدارة Apache.

وفقاً لإحصائيات مشروع Apache Cordova (2024)، يدعم الإطار 10 منصات محمولة، بما في ذلك iOS وAndroid وWindows وmacOS وElectron. تظل المنصتان الرئيسيتان Android وiOS، حيث تمثلان أكثر من 95% من جميع مشاريع Cordova.

بنية Cordova: كيف يعمل WebView والجسر

تتكون بنية Apache Cordova من أربع طبقات: تطبيق الويب، وWebView، وجسر الإضافات، والإضافات الأصلية. كل طبقة معزولة، مما يسمح باستبدال المكونات دون تغيير بقية النظام.

WebView وعرض الواجهة

WebView في Cordova هو مكون نظام تشغيل يعرض صفحة ويب كجزء من تطبيق أصلي. على iOS يستخدم WKWebView (منذ iOS 9+)، على Android — Android System WebView (منذ Android 5+). يقوم الإطار بتحميل نقطة الدخول index.html مع جميع موارد التطبيق في WebView.

وفقاً لفريق WebKit (2024)، يستهلك WKWebView ذاكرة أقل بنسبة 50% مقارنة بـ UIWebView الذي كان يُستخدم في الإصدارات المبكرة من Cordova. هذا أمر بالغ الأهمية للأجهزة المحمولة ذات الذاكرة العشوائية المحدودة.

الجسر بين JavaScript والكود الأصلي

الجسر هو الآلية الرئيسية لـ Cordova التي تسمح لكود JavaScript باستدعاء الوظائف الأصلية. عندما يستدعي التطبيق إضافة، يقوم Cordova بتسلسل الطلب إلى JSON ويرسله عبر بروتوكول URL الخاص بـ WebView (تغيير location.href بمخطط مخصص). يعترض الجانب الأصلي هذا الطلب وينفذ العملية المطلوبة ويعيد النتيجة.

تعمل هذه الآلية بشكل غير متزامن: استدعاء الإضافة يُرجع Promise يتم حله بعد اكتمال العملية الأصلية. وفقاً لاختبارات IBM Research (2023)، زمن استجابة الجسر هو 2–5 مللي ثانية للعمليات البسيطة وحتى 50 مللي ثانية لعمليات الإدخال/الإخراج.

الإضافات الأصلية

كل إضافة Cordova هي حزمة بواجهة JavaScript وتنفيذ أصلي لكل منصة. على iOS تُكتب الإضافات بلغة Objective-C أو Swift، على Android — بلغة Java أو Kotlin. الجزء JavaScript من الإضافة يوفر للمطور API قائمة على Promise، بينما يقوم الجزء الأصلي باستدعاءات النظام.

المجموعة القياسية تشمل أكثر من 30 إضافة: Battery Status، Camera، Contacts، Device Motion، File، Geolocation، InAppBrowser، Media، Network Information، Splashscreen، Statusbar، Vibration وغيرها.

واجهة أوامر Cordova ونظام إدارة الإضافات

سطر أوامر 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 — يُجمّع التطبيق إلى APK أو IPA عبر Xcode وAndroid Studio

جميع إعدادات المشروع تُخزن في ملف config.xml في الدليل الجذر. يُحدد فيه اسم التطبيق ومعرف الحزمة واتجاهات الشاشة المدعومة والأيقونات وقائمة الإضافات المثبتة. يستخدم الملف تنسيق XML W3C Widget Package، مما يسمح بدمج المشروع مع أي أدوات بناء، بما في ذلك أنظمة CI/CD مثل Jenkins وGitHub Actions.

أمثلة برمجية: الإضافات والتكوين

لننظر إلى مثال لملف التكوين config.xml لمشروع Cordova مع دعم الكاميرا والموقع الجغرافي.

<?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('Camera error:' + error);
    },
    { quality: 50, destinationType: 0 }
  );
}

الدالة capturePhoto تستدعي الكاميرا الأصلية عبر إضافة cordova-plugin-camera. تستقبل callback النجاح الصورة بتنسيق base64، ثم تُعرض على الصفحة. معالجة الأخطاء إلزامية — قد يرفض المستخدم طلب الوصول إلى الكاميرا.

قيود Cordova والانتقال إلى Capacitor

على الرغم من شعبيته، فإن Apache Cordova لديه عدد من القيود التي أدت إلى ظهور البديل Capacitor من فريق Ionic. المشكلات الرئيسية تتعلق بأداء الجسر ودعم معايير الويب الحديثة وتعقيد التصحيح.

الجسر عبر بروتوكول URL الخاص بـ WebView أبطأ من جسر JavaScript المباشر في Capacitor. مع الاستدعاءات المتكررة لواجهات API الأصلية، مثل العمل مع الكاميرا في الوقت الفعلي، يصبح هذا الفرق ملحوظاً. كما أن Cordova لا يدعم بشكل كامل إمكانيات WebView الحديثة دون إضافات إضافية.

قيد آخر هو عدم وجود دعم مدمج لـ Live Reload على الجهاز دون أدوات طرف ثالث. يتطلب التطوير باستخدام Cordova إعادة بناء المشروع بعد كل تغيير في الكود، مما يبطئ دورة التطوير مقارنةً بـ Capacitor أو React Native.

وفقاً لفريق Ionic (2024)، أكثر من 60% من المشاريع الهجينة الجديدة تختار Capacitor بدلاً من Cordova. ومع ذلك، تظل مشاريع Cordova الحالية عاملة — يستمر الإطار في تلقي تحديثات الأمان من Apache Software Foundation.

النظام البيئي لـ Cordova: PhoneGap وMonaca وغيرها

أصبح Apache Cordova الأساس للعديد من المنصات والخدمات التجارية التي توسع وظائفه وتوفر أدوات تطوير إضافية. PhoneGap من Adobe كان أول وأشهر توزيعة لـ Cordova.

يضيف PhoneGap خدمة PhoneGap Build السحابية، التي تسمح بتجميع التطبيق دون تثبيت Xcode أو Android Studio. يقوم المطور بتحميل الكود المصدري إلى خادم Adobe ويتلقى ملفات APK وIPA جاهزة. كان هذا مناسباً بشكل خاص للفرق التي لا تملك بنية تحتية لنظام Mac.

منصات أخرى مبنية على Cordova تشمل Monaca (بيئة تطوير سحابية) وFramework7. توفر Monaca بيئة تطوير كاملة في المتصفح مع محاكي جهاز وتكامل مع إضافات Cordova. يستخدم Framework7 Cordova كخلفية للعرض، ويقدم مجموعته الخاصة من مكونات واجهة المستخدم.

على الرغم من انخفاض شعبية Cordova بعد إطلاق Flutter وReact Native، يظل النظام البيئي ملائماً لصيانة المشاريع القديمة والسيناريوهات المتخصصة حيث تكون سهولة الدخول لمطوري الويب أمراً بالغ الأهمية. غالباً ما تبقى تطبيقات المؤسسات ذات متطلبات الوصول إلى الأجهزة غير النمطية على Cordova بسبب مكتبته الواسعة من الإضافات المختبرة.

للهجرة من Cordova إلى Capacitor، يوجد دليل خطوة بخطوة من فريق Ionic يتضمن استبدال نصوص التهيئة في index.html وتحديث التكوين. التحدي الرئيسي هو التحقق من توافق إضافات Cordova المخصصة مع بنية جسر Capacitor الجديدة.