Apache Cordova — co to jest, architektura i zasada działania hybrydowego frameworka

Czym jest Apache Cordova?

Apache Cordova — to platforma z otwartym kodem źródłowym, która opakowuje aplikację webową w natywny kontener i udostępnia JavaScript API do dostępu do możliwości sprzętowych urządzenia mobilnego. Początkowo projekt nazywał się PhoneGap i został stworzony przez firmę Nitobi Software w 2009 roku.

W 2011 roku firma Adobe przejęła Nitobi i przekazała kod źródłowy PhoneGap do Apache Software Foundation, gdzie projekt otrzymał nazwę Apache Cordova. Adobe kontynuowała wydawanie PhoneGap jako dystrybucji Cordova z dodatkowymi usługami, a sam framework stał się niezależnym projektem pod zarządem Apache.

Według danych Apache Cordova Project Statistics (2024), framework obsługuje 10 platform mobilnych, w tym iOS, Android, Windows, macOS i Electron. Głównymi platformami pozostają Android i iOS, na które przypada ponad 95% wszystkich projektów Cordova.

Architektura Cordova: jak działa WebView i most

Architektura Apache Cordova składa się z czterech warstw: aplikacji webowej, WebView, mostu wtyczek i wtyczek natywnych. Każda warstwa jest izolowana, co pozwala na wymianę komponentów bez zmiany reszty systemu.

WebView i wyświetlanie interfejsu

WebView w Cordova — to systemowy komponent OS, który wyświetla stronę internetową jako część natywnej aplikacji. Na iOS używany jest WKWebView (od iOS 9+), na Android — Android System WebView (od Android 5+). Framework ładuje w WebView punkt wejścia index.html ze wszystkimi zasobami aplikacji.

Według danych WebKit Team (2024), WKWebView ma o 50% mniejsze zużycie pamięci w porównaniu do UIWebView, który był używany we wczesnych wersjach Cordova. Jest to krytyczne dla urządzeń mobilnych z ograniczoną pamięcią RAM.

Most między JavaScript a kodem natywnym

Most (bridge) — kluczowy mechanizm Cordova, który pozwala kodowi JavaScript wywoływać funkcje natywne. Gdy aplikacja wywołuje wtyczkę, Cordova serializuje żądanie do JSON i wysyła je przez protokół URL WebView (zmiana location.href z niestandardowym schematem). Strona natywna przechwytuje to żądanie, wykonuje odpowiednią operację i zwraca wynik.

Ten mechanizm działa asynchronicznie: wywołanie wtyczki zwraca Promise, który jest rozwiązywany po wykonaniu operacji natywnej. Według danych testów IBM Research (2023), opóźnienie mostu wynosi 2–5 ms dla prostych operacji i do 50 ms dla operacji wejścia-wyjścia.

Wtyczki natywne

Każda wtyczka Cordova — to pakiet z interfejsem JavaScript i implementacją natywną dla każdej platformy. Na iOS wtyczki pisze się w Objective-C lub Swift, na Android — w Java lub Kotlin. Część JavaScript wtyczki udostępnia programiście API oparte na Promise, a część natywna wykonuje wywołania systemowe.

Standardowy zestaw zawiera ponad 30 wtyczek: Battery Status, Camera, Contacts, Device Motion, File, Geolocation, InAppBrowser, Media, Network Information, Splashscreen, Statusbar, Vibration i inne.

Cordova CLI i system zarządzania wtyczkami

Wiersz poleceń Cordova CLI — główne narzędzie do tworzenia, budowania i zarządzania projektami. Udostępnia polecenia do inicjalizacji projektu, dodawania platform i instalowania wtyczek przez jednolity interfejs.

Proces pracy obejmuje trzy podstawowe polecenia: cordova create do tworzenia projektu, cordova platform add ios/android do dodawania platform docelowych i cordova plugin add do instalowania wtyczek z rejestru npm.

• cordova create — tworzy strukturę projektu z www/, hooks/ i config.xml
• cordova platform add — pobiera i konfiguruje projekty natywne dla iOS lub Android
• cordova plugin add — instaluje wtyczkę i rejestruje ją w konfiguracji projektu
• cordova build — kompiluje aplikację do APK lub IPA przez Xcode i Android Studio

Wszystkie ustawienia projektu przechowywane są w pliku config.xml w katalogu głównym. Określa się w nim nazwę aplikacji, identyfikator pakietu, obsługiwane orientacje ekranu, ikony i listę zainstalowanych wtyczek. Plik wykorzystuje format XML W3C Widget Package, co pozwala na integrację projektu z dowolnymi narzędziami do budowania, w tym systemami CI/CD Jenkins i GitHub Actions.

Przykłady kodu: wtyczki i konfiguracja

Rozważmy przykład pliku konfiguracyjnego config.xml dla projektu Cordova z obsługą aparatu i geolokacji.

<?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>
        Przykład aplikacji Cordova
    </description>
    <plugin name='cordova-plugin-camera' />
    <plugin name='cordova-plugin-geolocation' />
    <allow-intent href='http://*/*' />
    <allow-intent href='https://*/*' />
</widget>

W tym config.xml zadeklarowane są wtyczki aparatu i geolokacji, a także dozwolone są połączenia HTTP/HTTPS do ładowania danych z serwera. Cordova automatycznie podłącza je podczas budowania i udostępnia poprzez globalne obiekty navigator.camera i navigator.geolocation.

Przykład wywołania wtyczki aparatu z kodu JavaScript aplikacji:

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

Funkcja capturePhoto wywołuje natywny aparat przez wtyczkę cordova-plugin-camera. Callback sukcesu otrzymuje obraz w formacie base64, po czym jest on wyświetlany na stronie. Obsługa błędów jest obowiązkowa — użytkownik może odrzucić żądanie dostępu do aparatu.

Ograniczenia Cordova i przejście na Capacitor

Pomimo popularności, Apache Cordova ma szereg ograniczeń, które doprowadziły do powstania alternatywy Capacitor od zespołu Ionic. Główne problemy związane są z wydajnością mostu, obsługą nowoczesnych standardów webowych i trudnością debugowania.

Most przez protokół URL WebView działa wolniej niż bezpośredni JavaScript Bridge w Capacitor. Przy częstych wywołaniach natywnych API, na przykład podczas pracy z aparatem w czasie rzeczywistym, różnica ta staje się zauważalna. Cordova nie obsługuje również w pełni nowoczesnych możliwości WebView bez dodatkowych wtyczek.

Kolejne ograniczenie — brak wbudowanej obsługi Live Reload na urządzeniu bez zewnętrznych narzędzi. Do rozwoju Cordova wymaga przebudowy projektu po każdej zmianie kodu, co spowalnia cykl rozwoju w porównaniu do Capacitor lub React Native.

Według danych Ionic Team (2024), ponad 60% nowych projektów hybrydowych wybiera Capacitor zamiast Cordova. Jednak istniejące projekty Cordova pozostają funkcjonalne — framework nadal otrzymuje aktualizacje bezpieczeństwa od Apache Software Foundation.

Ekosystem Cordova: PhoneGap, Monaca i inne

Apache Cordova stał się podstawą dla kilku komercyjnych platform i usług, które rozszerzają jego funkcjonalność i udostępniają dodatkowe narzędzia do rozwoju. PhoneGap od Adobe był pierwszą i najbardziej znaną dystrybucją Cordova.

PhoneGap dodaje chmurową usługę PhoneGap Build, która pozwala kompilować aplikację bez instalacji Xcode lub Android Studio. Programista przesyła kod źródłowy na serwer Adobe i otrzymuje gotowe pliki APK i IPA. Było to szczególnie wygodne dla zespołów bez infrastruktury Mac.

Inne platformy oparte na Cordova obejmują Monaca (chmurowe IDE) i Framework7. Monaca zapewnia pełne środowisko programistyczne w przeglądarce z symulatorem urządzenia i integracją z wtyczkami Cordova. Framework7 używa Cordova jako backendu do renderowania, oferując własny zestaw komponentów UI.

Pomimo spadku popularności Cordova po wydaniu Flutter i React Native, ekosystem pozostaje aktualny do wsparcia projektów legacy i niszowych scenariuszy, gdzie kluczowa jest prostota wejścia dla programistów webowych. Aplikacje korporacyjne z nietypowymi wymaganiami dostępu do sprzętu często pozostają na Cordova ze względu na obszerną bibliotekę sprawdzonych wtyczek.

Do migracji z Cordova na Capacitor istnieje instrukcja krok po kroku od Ionic Team, która obejmuje wymianę skryptów inicjalizacyjnych w index.html i aktualizację konfiguracji. Główna trudność — sprawdzenie kompatybilności niestandardowych wtyczek Cordova z nową architekturą mostu Capacitor.