Apache Cordova — vad det är, arkitektur och principen för hur hybridramverket fungerar

Vad är Apache Cordova?

Apache Cordova — är en plattform med öppen källkod som omsluter en webbapplikation i en inbyggd behållare och tillhandahåller JavaScript API för åtkomst till hårdvarufunktionerna hos den mobila enheten. Ursprungligen hette projektet PhoneGap och skapades av Nitobi Software 2009.

2011 köpte Adobe Nitobi och överförde PhoneGaps källkod till Apache Software Foundation, där projektet fick namnet Apache Cordova. Adobe fortsatte att släppa PhoneGap som en distribution av Cordova med ytterligare tjänster, och ramverket blev ett oberoende projekt under Apaches förvaltning.

Enligt Apache Cordova Project Statistics (2024) stöder ramverket 10 mobila plattformar, inklusive iOS, Android, Windows, macOS och Electron. Huvudplattformarna är fortfarande Android och iOS, som står för över 95 % av alla Cordova-projekt.

Cordovas arkitektur: hur WebView och bryggan fungerar

Arkitekturen för Apache Cordova består av fyra lager: webbapplikation, WebView, pluginbrygga och inbyggda plugins. Varje lager är isolerat, vilket gör att komponenter kan bytas ut utan att ändra resten av systemet.

WebView och gränssnittsvisning

WebView i Cordova — är en systemkomponent i OS som visar en webbsida som en del av en inbyggd applikation. På iOS används WKWebView (från iOS 9+), på Android — Android System WebView (från Android 5+). Ramverket laddar in i WebView ingångspunkten index.html med alla applikationens resurser.

Enligt uppgifter från WebKit Team (2024) har WKWebView 50 % lägre minnesförbrukning jämfört med UIWebView, som användes i tidiga versioner av Cordova. Detta är kritiskt för mobila enheter med begränsat RAM-minne.

Bryggan mellan JavaScript och inbyggd kod

Bryggan (bridge) — den viktigaste mekanismen i Cordova som gör att JavaScript-kod kan anropa inbyggda funktioner. När en applikation anropar ett plugin serialiserar Cordova begäran till JSON och skickar den via WebViews URL-protokoll (ändring av location.href med ett anpassat schema). Den inbyggda sidan fångar upp denna begäran, utför den nödvändiga operationen och returnerar resultatet.

Denna mekanism fungerar asynkront: ett plugin-anrop returnerar ett Promise som löses efter att den inbyggda operationen har utförts. Enligt tester från IBM Research (2023) är bryggans latens 2–5 ms för enkla operationer och upp till 50 ms för I/O-operationer.

Inbyggda plugins

Varje Cordova plugin — är ett paket med ett JavaScript-gränssnitt och en inbyggd implementering för varje plattform. På iOS skrivs plugins i Objective-C eller Swift, på Android — i Java eller Kotlin. JavaScript-delen av pluginet ger utvecklaren ett Promise-baserat API medan den inbyggda delen utför systemanrop.

Standarduppsättningen innehåller över 30 plugins: Battery Status, Camera, Contacts, Device Motion, File, Geolocation, InAppBrowser, Media, Network Information, Splashscreen, Statusbar, Vibration och andra.

Cordova CLI och pluginhanteringssystem

Kommandoraden Cordova CLI — det huvudsakliga verktyget för att skapa, bygga och hantera projekt. Den tillhandahåller kommandon för initialisering av projekt, tillägg av plattformar och installation av plugins via ett enhetligt gränssnitt.

Arbetsflödet omfattar tre grundläggande kommandon: cordova create för att skapa ett projekt, cordova platform add ios/android för att lägga till målplattformar och cordova plugin add för att installera plugins från npm-registret.

• cordova create — skapar projektstruktur med www/, hooks/ och config.xml
• cordova platform add — laddar ner och konfigurerar inbyggda projekt för iOS eller Android
• cordova plugin add — installerar ett plugin och registrerar det i projektkonfigurationen
• cordova build — kompilerar applikationen till APK eller IPA via Xcode och Android Studio

Alla projektinställningar lagras i filen config.xml i rotkatalogen. Där anges applikationsnamn, paketidentifierare, skärmorienteringar som stöds, ikoner och lista över installerade plugins. Filen använder formatet XML W3C Widget Package, vilket gör att projektet kan integreras med alla byggverktyg, inklusive CI/CD-system som Jenkins och GitHub Actions.

Kodexempel: plugins och konfiguration

Låt oss titta på ett exempel på en konfigurationsfil config.xml för ett Cordova-projekt med stöd för kamera och geolokalisering.

<?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>
        Exempel på Cordova-applikation
    </description>
    <plugin name='cordova-plugin-camera' />
    <plugin name='cordova-plugin-geolocation' />
    <allow-intent href='http://*/*' />
    <allow-intent href='https://*/*' />
</widget>

I denna config.xml deklareras kamera- och geolokaliseringsplugins, och HTTP/HTTPS-anslutningar tillåts för att ladda data från servern. Cordova ansluter dem automatiskt vid byggning och gör dem tillgängliga via de globala objekten navigator.camera och navigator.geolocation.

Exempel på anrop av kameraplugin från applikationens JavaScript-kod:

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

Funktionen capturePhoto anropar den inbyggda kameran via plugin cordova-plugin-camera. Återanropet vid framgång tar emot bilden i base64-format, varefter den visas på sidan. Felhantering är obligatorisk — användaren kan avvisa begäran om kameraåtkomst.

Begränsningar med Cordova och övergång till Capacitor

Trots sin popularitet har Apache Cordova ett antal begränsningar som ledde till framväxten av alternativet Capacitor från Ionic-teamet. De huvudsakliga problemen rör bryggans prestanda, stöd för moderna webbstandarder och komplexiteten i felsökning.

Bryggan via WebViews URL-protokoll fungerar långsammare än den direkta JavaScript Bridge i Capacitor. Vid frekventa anrop av inbyggda API:er, till exempel vid arbete med kameran i realtid, blir denna skillnad märkbar. Cordova stöder inte heller fullt ut WebViews moderna funktioner utan ytterligare plugins.

En annan begränsning — avsaknad av inbyggt stöd för Live Reload på enheten utan externa verktyg. För utveckling kräver Cordova ombyggnad av projektet efter varje kodändring, vilket saktar ner utvecklingscykeln jämfört med Capacitor eller React Native.

Enligt uppgifter från Ionic Team (2024) väljer över 60 % av nya hybridprojekt Capacitor istället för Cordova. Befintliga Cordova-projekt förblir dock funktionella — ramverket fortsätter att få säkerhetsuppdateringar från Apache Software Foundation.

Cordova-ekosystemet: PhoneGap, Monaca och andra

Apache Cordova har blivit grunden för flera kommersiella plattformar och tjänster som utökar dess funktionalitet och tillhandahåller ytterligare utvecklingsverktyg. PhoneGap från Adobe var den första och mest kända distributionen av Cordova.

PhoneGap lägger till molntjänsten PhoneGap Build, som gör det möjligt att kompilera applikationen utan att installera Xcode eller Android Studio. Utvecklaren laddar upp källkoden till Adobe-servern och får färdiga APK- och IPA-filer. Detta var särskilt bekvämt för team utan Mac-infrastruktur.

Andra plattformar baserade på Cordova inkluderar Monaca (moln-IDE) och Framework7. Monaca tillhandahåller en komplett utvecklingsmiljö i webbläsaren med enhetssimulator och integration med Cordova-plugins. Framework7 använder Cordova som backend för rendering och erbjuder sin egen uppsättning UI-komponenter.

Trots Cordovas minskade popularitet efter lanseringen av Flutter och React Native förblir ekosystemet relevant för stöd av äldre projekt och nischscenarier där enkelheten för webbutvecklare att komma igång är kritisk. Företagsapplikationer med ovanliga krav på hårdvaruåtkomst stannar ofta kvar på Cordova på grund av det omfattande biblioteket med beprövade plugins.

För migrering från Cordova till Capacitor finns en steg-för-steg-guide från Ionic Team som omfattar utbyte av initialiseringsskript i index.html och uppdatering av konfigurationen. Huvudsvårigheten — att kontrollera kompatibiliteten för anpassade Cordova-plugins med den nya arkitekturen för Capacitor-bryggan.