Apache Cordova — wat is het, architectuur en werkingsprincipe van het hybride framework

Wat is Apache Cordova?

Apache Cordova — is een open-source platform dat een webapplicatie in een native container plaatst en een JavaScript API biedt voor toegang tot de hardwaremogelijkheden van het mobiele apparaat. Oorspronkelijk heette het project PhoneGap en werd het in 2009 gecreëerd door Nitobi Software.

In 2011 kocht Adobe Nitobi en droeg de broncode van PhoneGap over aan de Apache Software Foundation, waar het project de naam Apache Cordova kreeg. Adobe bleef PhoneGap uitbrengen als een distributie van Cordova met extra services, en het framework werd een onafhankelijk project onder beheer van Apache.

Volgens Apache Cordova Project Statistics (2024) ondersteunt het framework 10 mobiele platforms, waaronder iOS, Android, Windows, macOS en Electron. De belangrijkste platforms blijven Android en iOS, die meer dan 95% van alle Cordova-projecten vertegenwoordigen.

Cordova architectuur: hoe WebView en de brug werken

De architectuur van Apache Cordova bestaat uit vier lagen: de webapplicatie, WebView, de pluginbrug en native plugins. Elke laag is geïsoleerd, waardoor componenten kunnen worden vervangen zonder de rest van het systeem te wijzigen.

WebView en interfaceweergave

WebView in Cordova — is een systeemcomponent van de OS die een webpagina weergeeft als onderdeel van een native applicatie. Op iOS wordt WKWebView gebruikt (vanaf iOS 9+), op Android — Android System WebView (vanaf Android 5+). Het framework laadt in WebView het startpunt index.html met alle resources van de applicatie.

Volgens gegevens van WebKit Team (2024) verbruikt WKWebView 50% minder geheugen vergeleken met UIWebView, dat in vroege versies van Cordova werd gebruikt. Dit is cruciaal voor mobiele apparaten met beperkt RAM-geheugen.

De brug tussen JavaScript en native code

De brug (bridge) — het belangrijkste mechanisme van Cordova waarmee JavaScript-code native functies kan aanroepen. Wanneer een applicatie een plugin aanroept, serialiseert Cordova het verzoek naar JSON en verzendt het via het URL-protocol van WebView (wijzigen van location.href met een aangepast schema). De native kant onderschept dit verzoek, voert de benodigde bewerking uit en retourneert het resultaat.

Dit mechanisme werkt asynchroon: het aanroepen van een plugin retourneert een Promise die wordt opgelost na uitvoering van de native bewerking. Volgens tests van IBM Research (2023) bedraagt de latentie van de brug 2–5 ms voor eenvoudige bewerkingen en tot 50 ms voor I/O-bewerkingen.

Native plugins

Elke Cordova plugin — is een pakket met een JavaScript-interface en een native implementatie voor elk platform. Op iOS worden plugins geschreven in Objective-C of Swift, op Android — in Java of Kotlin. Het JavaScript-gedeelte van de plugin biedt de ontwikkelaar een Promise-gebaseerde API, terwijl het native gedeelte systeemaanroepen uitvoert.

De standaardset bevat meer dan 30 plugins: Battery Status, Camera, Contacts, Device Motion, File, Geolocation, InAppBrowser, Media, Network Information, Splashscreen, Statusbar, Vibration en andere.

Cordova CLI en het pluginbeheersysteem

De opdrachtregel Cordova CLI — het belangrijkste hulpmiddel voor het maken, bouwen en beheren van projecten. Het biedt opdrachten voor het initialiseren van projecten, het toevoegen van platforms en het installeren van plugins via een uniforme interface.

De workflow omvat drie basisopdrachten: cordova create voor het maken van een project, cordova platform add ios/android voor het toevoegen van doelplatforms en cordova plugin add voor het installeren van plugins uit de npm-registry.

• cordova create — maakt de projectstructuur met www/, hooks/ en config.xml
• cordova platform add — downloadt en configureert native projecten voor iOS of Android
• cordova plugin add — installeert een plugin en registreert deze in de projectconfiguratie
• cordova build — compileert de applicatie naar APK of IPA via Xcode en Android Studio

Alle projectinstellingen worden opgeslagen in het bestand config.xml in de hoofdmap. Hierin worden de naam van de applicatie, pakketidentificatie, ondersteunde schermoriëntaties, pictogrammen en de lijst met geïnstalleerde plugins vermeld. Het bestand gebruikt het XML W3C Widget Package-formaat, waardoor het project kan worden geïntegreerd met alle bouwtools, waaronder CI/CD-systemen Jenkins en GitHub Actions.

Codevoorbeelden: plugins en configuratie

Laten we een voorbeeld van een configuratiebestand config.xml bekijken voor een Cordova-project met ondersteuning voor camera en geolocatie.

<?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>
        Voorbeeld van Cordova-applicatie
    </description>
    <plugin name='cordova-plugin-camera' />
    <plugin name='cordova-plugin-geolocation' />
    <allow-intent href='http://*/*' />
    <allow-intent href='https://*/*' />
</widget>

In dit config.xml zijn de camera- en geolocatie-plugins gedeclareerd en zijn HTTP/HTTPS-verbindingen toegestaan voor het laden van gegevens van de server. Cordova koppelt ze automatisch tijdens het bouwen en maakt ze toegankelijk via de globale objecten navigator.camera en navigator.geolocation.

Voorbeeld van het aanroepen van de camera-plugin vanuit JavaScript-code van de applicatie:

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

De functie capturePhoto roept de native camera aan via de plugin cordova-plugin-camera. De succes-callback ontvangt de afbeelding in base64-formaat, waarna deze op de pagina wordt weergegeven. Foutafhandeling is verplicht — de gebruiker kan het verzoek om toegang tot de camera weigeren.

Beperkingen van Cordova en overstap naar Capacitor

Ondanks de populariteit heeft Apache Cordova een aantal beperkingen die hebben geleid tot de opkomst van het alternatief Capacitor van het Ionic-team. De belangrijkste problemen hebben betrekking op de prestaties van de brug, ondersteuning voor moderne webstandaarden en de complexiteit van debuggen.

De brug via het URL-protocol van WebView werkt langzamer dan de directe JavaScript Bridge in Capacitor. Bij frequente aanroepen van native API’s, bijvoorbeeld bij het werken met de camera in real-time, wordt dit verschil merkbaar. Cordova ondersteunt ook niet volledig de moderne mogelijkheden van WebView zonder extra plugins.

Een andere beperking — geen ingebouwde ondersteuning voor Live Reload op het apparaat zonder externe tools. Voor ontwikkeling vereist Cordova het herbouwen van het project na elke codewijziging, wat de ontwikkelingscyclus vertraagt in vergelijking met Capacitor of React Native.

Volgens gegevens van Ionic Team (2024) kiest meer dan 60% van de nieuwe hybride projecten voor Capacitor in plaats van Cordova. Bestaande Cordova-projecten blijven echter functioneel — het framework blijft beveiligingsupdates ontvangen van de Apache Software Foundation.

Cordova ecosysteem: PhoneGap, Monaca en anderen

Apache Cordova is de basis geworden voor verschillende commerciële platforms en services die de functionaliteit ervan uitbreiden en extra ontwikkeltools bieden. PhoneGap van Adobe was de eerste en meest bekende distributie van Cordova.

PhoneGap voegt de cloudservice PhoneGap Build toe, waarmee de applicatie kan worden gecompileerd zonder Xcode of Android Studio te installeren. De ontwikkelaar uploadt de broncode naar de Adobe-server en ontvangt kant-en-klare APK- en IPA-bestanden. Dit was vooral handig voor teams zonder Mac-infrastructuur.

Andere op Cordova gebaseerde platforms zijn Monaca (cloud IDE) en Framework7. Monaca biedt een volledige ontwikkelomgeving in de browser met een apparaatsimulator en integratie met Cordova-plugins. Framework7 gebruikt Cordova als backend voor rendering en biedt een eigen set UI-componenten.

Ondanks de afnemende populariteit van Cordova na de release van Flutter en React Native, blijft het ecosysteem relevant voor ondersteuning van legacy-projecten en niches waar eenvoudige toegang voor webontwikkelaars cruciaal is. Bedrijfsapplicaties met ongebruikelijke hardwaretoegangseisen blijven vaak op Cordova vanwege de uitgebreide bibliotheek met bewezen plugins.

Voor migratie van Cordova naar Capacitor is er een stapsgewijze handleiding van Ionic Team, die het vervangen van initialisatiescripts in index.html en het bijwerken van de configuratie omvat. De belangrijkste uitdaging is het controleren van de compatibiliteit van aangepaste Cordova-plugins met de nieuwe architectuur van de Capacitor-brug.