Apache Cordova — co to je, architektura a princip fungování hybridního frameworku

Co je Apache Cordova?

Apache Cordova — je open-source platforma, která obaluje webovou aplikaci do nativního kontejneru a poskytuje JavaScript API pro přístup k hardwarovým možnostem mobilního zařízení. Původně se projekt jmenoval PhoneGap a byl vytvořen společností Nitobi Software v roce 2009.

V roce 2011 společnost Adobe koupila Nitobi a předala zdrojový kód PhoneGapu Apache Software Foundation, kde projekt získal název Apache Cordova. Adobe pokračovala ve vydávání PhoneGapu jako distribuce Cordovy s doplňkovými službami a samotný framework se stal nezávislým projektem pod správou Apache.

Podle Apache Cordova Project Statistics (2024) framework podporuje 10 mobilních platforem, včetně iOS, Android, Windows, macOS a Electron. Hlavními platformami zůstávají Android a iOS, na které připadá více než 95 % všech projektů Cordova.

Architektura Cordova: jak funguje WebView a most

Architektura Apache Cordova se skládá ze čtyř vrstev: webová aplikace, WebView, most pluginů a nativní pluginy. Každá vrstva je izolovaná, což umožňuje výměnu komponent bez změny zbytku systému.

WebView a zobrazení rozhraní

WebView v Cordově — je systémová komponenta OS, která zobrazuje webovou stránku jako součást nativní aplikace. Na iOS se používá WKWebView (od iOS 9+), na Androidu — Android System WebView (od Android 5+). Framework načítá do WebView vstupní bod index.html se všemi zdroji aplikace.

Podle údajů WebKit Team (2024) má WKWebView o 50 % nižší spotřebu paměti ve srovnání s UIWebView, který byl používán v raných verzích Cordovy. To je kritické pro mobilní zařízení s omezenou RAM.

Most mezi JavaScriptem a nativním kódem

Most (bridge) — klíčový mechanismus Cordovy, který umožňuje JavaScript kódu volat nativní funkce. Když aplikace zavolá plugin, Cordova serializuje požadavek do JSON a odešle ho přes URL protokol WebView (změna location.href s vlastním schématem). Nativní strana tento požadavek zachytí, provede potřebnou operaci a vrátí výsledek.

Tento mechanismus pracuje asynchronně: volání pluginu vrací Promise, který je vyřešen po provedení nativní operace. Podle testů IBM Research (2023) je latence mostu 2–5 ms pro jednoduché operace a až 50 ms pro I/O operace.

Nativní pluginy

Každý Cordova plugin — je balíček s JavaScript rozhraním a nativní implementací pro každou platformu. Na iOS se pluginy píší v Objective-C nebo Swift, na Androidu — v Javě nebo Kotlinu. JavaScriptová část pluginu poskytuje vývojáři API založené na Promise, zatímco nativní část provádí systémová volání.

Standardní sada obsahuje více než 30 pluginů: Battery Status, Camera, Contacts, Device Motion, File, Geolocation, InAppBrowser, Media, Network Information, Splashscreen, Statusbar, Vibration a další.

Cordova CLI a systém správy pluginů

Příkazový řádek Cordova CLI — hlavní nástroj pro vytváření, sestavování a správu projektů. Poskytuje příkazy pro inicializaci projektu, přidávání platforem a instalaci pluginů prostřednictvím jednotného rozhraní.

Pracovní postup zahrnuje tři základní příkazy: cordova create pro vytvoření projektu, cordova platform add ios/android pro přidání cílových platforem a cordova plugin add pro instalaci pluginů z npm registru.

• cordova create — vytváří strukturu projektu s www/, hooks/ a config.xml
• cordova platform add — stahuje a konfiguruje nativní projekty pro iOS nebo Android
• cordova plugin add — instaluje plugin a registruje ho v konfiguraci projektu
• cordova build — kompiluje aplikaci do APK nebo IPA přes Xcode a Android Studio

Všechna nastavení projektu jsou uložena v souboru config.xml v kořenovém adresáři. Jsou v něm uvedeny název aplikace, identifikátor balíčku, podporované orientace obrazovky, ikony a seznam nainstalovaných pluginů. Soubor používá formát XML W3C Widget Package, což umožňuje integraci projektu s libovolnými nástroji pro sestavování, včetně CI/CD systémů Jenkins a GitHub Actions.

Příklady kódu: pluginy a konfigurace

Podívejme se na příklad konfiguračního souboru config.xml pro projekt Cordova s podporou kamery a geolokace.

<?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>
        Příklad Cordova aplikace
    </description>
    <plugin name='cordova-plugin-camera' />
    <plugin name='cordova-plugin-geolocation' />
    <allow-intent href='http://*/*' />
    <allow-intent href='https://*/*' />
</widget>

V tomto config.xml jsou deklarovány pluginy kamery a geolokace a jsou povolena HTTP/HTTPS připojení pro načítání dat ze serveru. Cordova je automaticky připojí při sestavování a zpřístupní je prostřednictvím globálních objektů navigator.camera a navigator.geolocation.

Příklad volání pluginu kamery z JavaScript kódu aplikace:

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

Funkce capturePhoto volá nativní kameru přes plugin cordova-plugin-camera. Zpětné volání úspěchu obdrží obrázek ve formátu base64, poté je zobrazen na stránce. Ošetření chyb je povinné — uživatel může odmítnout žádost o přístup ke kameře.

Omezení Cordova a přechod na Capacitor

Navzdory popularitě má Apache Cordova řadu omezení, která vedla ke vzniku alternativy Capacitor od týmu Ionic. Hlavní problémy souvisí s výkonem mostu, podporou moderních webových standardů a složitostí ladění.

Most přes URL protokol WebView pracuje pomaleji než přímý JavaScript Bridge v Capacitoru. Při častých voláních nativních API, například při práci s kamerou v reálném čase, je tento rozdíl znatelný. Cordova také plně nepodporuje moderní možnosti WebView bez dalších pluginů.

Další omezení — chybějící vestavěná podpora Live Reload na zařízení bez externích nástrojů. Pro vývoj vyžaduje Cordova přestavbu projektu po každé změně kódu, což zpomaluje vývojový cyklus ve srovnání s Capacitorem nebo React Native.

Podle údajů Ionic Team (2024) si více než 60 % nových hybridních projektů vybírá Capacitor místo Cordovy. Stávající projekty Cordova však zůstávají funkční — framework nadále dostává bezpečnostní aktualizace od Apache Software Foundation.

Ekosystém Cordova: PhoneGap, Monaca a další

Apache Cordova se stal základem pro několik komerčních platforem a služeb, které rozšiřují jeho funkcionalitu a poskytují další vývojové nástroje. PhoneGap od Adobe byl první a nejznámější distribucí Cordovy.

PhoneGap přidává cloudovou službu PhoneGap Build, která umožňuje kompilovat aplikaci bez instalace Xcode nebo Android Studio. Vývojář nahraje zdrojový kód na server Adobe a obdrží hotové APK a IPA soubory. To bylo zvláště výhodné pro týmy bez Mac infrastruktury.

Další platformy založené na Cordově zahrnují Monaca (cloudové IDE) a Framework7. Monaca poskytuje kompletní vývojové prostředí v prohlížeči se simulátorem zařízení a integrací s Cordova pluginy. Framework7 používá Cordovu jako backend pro vykreslování a nabízí vlastní sadu UI komponent.

Navzdory poklesu popularity Cordovy po vydání Flutteru a React Native zůstává ekosystém relevantní pro podporu starších projektů a specializovaných scénářů, kde je klíčová jednoduchost vstupu pro webové vývojáře. Podnikové aplikace s neobvyklými požadavky na přístup k hardwaru často zůstávají na Cordově kvůli rozsáhlé knihovně ověřených pluginů.

Pro migraci z Cordovy na Capacitor existuje podrobný návod od Ionic Team, který zahrnuje výměnu inicializačních skriptů v index.html a aktualizaci konfigurace. Hlavní obtíž — kontrola kompatibility vlastních Cordova pluginů s novou architekturou mostu Capacitoru.