Apache Cordova — що це, архітектура та принцип роботи гібридного фреймворку

Що таке Apache Cordova?

Apache Cordova — це платформа з відкритим кодом, яка обгортає веб-додаток у нативний контейнер та надає 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, на частку яких припадає понад 95% всіх Cordova-проектів.

Архітектура Cordova: як працюють WebView та міст

Архітектура Apache Cordova складається з чотирьох рівнів: веб-додаток, WebView, плагінний міст та нативні плагіни. Кожен рівень ізольований, що дозволяє замінювати компоненти без зміни решти системи.

WebView та відображення інтерфейсу

WebView у Cordova — це системний компонент ОС, який відображає веб-сторінку як частину нативного додатку. На iOS використовується WKWebView (з iOS 9+), на Android — Android System WebView (з Android 5+). Фреймворк завантажує в WebView точку входу index.html з усіма ресурсами додатку.

За даними WebKit Team (2024), WKWebView має на 50% менше споживання пам'яті порівняно з UIWebView, який використовувався в ранніх версіях Cordova. Це критично для мобільних пристроїв з обмеженою оперативною пам'яттю.

Міст між JavaScript та нативним кодом

Міст (bridge) — ключовий механізм 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-частина плагіна надає розробнику Promise-based 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 — компілює додаток в 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. Колбек успіху отримує зображення у форматі base64, після чого воно відображається на сторінці. Обробка помилок обов'язкова — користувач може відхилити запит на доступ до камери.

Обмеження Cordova та перехід на Capacitor

Незважаючи на популярність, Apache Cordova має ряд обмежень, які призвели до появи альтернативи Capacitor від команди Ionic. Основні проблеми пов'язані з продуктивністю моста, підтримкою сучасних веб-стандартів та складністю налагодження.

Міст через URL-протокол WebView працює повільніше прямого JavaScript Bridge у Capacitor. При частих викликах нативних API, наприклад, при роботі з камерою в реальному часі, ця різниця стає помітною. Cordova також не підтримує сучасні можливості WebView в повному обсязі без додаткових плагінів.

Ще одне обмеження — відсутність вбудованої підтримки Live Reload на пристрої без сторонніх інструментів. Для розробки Cordova потрібно перезбирати проект після кожної зміни коду, що уповільнює цикл розробки порівняно з Capacitor або React Native.

За даними Ionic Team (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 (хмарна IDE) та Framework7. Monaca надає повноцінне середовище розробки в браузері з симулятором пристрою та інтеграцією з Cordova-плагінами. Framework7 використовує Cordova як бекенд для рендерингу, пропонуючи власний набір UI-компонентів.

Незважаючи на зниження популярності Cordova після виходу Flutter та React Native, екосистема залишається актуальною для підтримки легасі-проектів та нішевих сценаріїв, де критична простота входу для веб-розробників. Корпоративні додатки з нетиповими вимогами до апаратного доступу часто залишаються на Cordova через обширну бібліотеку перевірених плагінів.

Для міграції з Cordova на Capacitor існує покрокова інструкція від Ionic Team, яка включає заміну скриптів ініціалізації в index.html та оновлення конфігурації. Основна складність — перевірка сумісності кастомних Cordova-плагінів з новою архітектурою моста Capacitor.