Apache Cordova — cos’è, architettura e principio di funzionamento del framework ibrido

Cos’è Apache Cordova?

Apache Cordova è una piattaforma open source che avvolge un’applicazione web in un contenitore nativo e fornisce un’API JavaScript per accedere alle capacità hardware del dispositivo mobile. Il progetto si chiamava originariamente PhoneGap ed è stato creato da Nitobi Software nel 2009.

Nel 2011, Adobe ha acquisito Nitobi e ha donato il codice sorgente di PhoneGap all’Apache Software Foundation, dove il progetto è stato rinominato Apache Cordova. Adobe ha continuato a rilasciare PhoneGap come distribuzione di Cordova con servizi aggiuntivi, mentre il framework è diventato un progetto indipendente sotto la gestione di Apache.

Secondo le statistiche del progetto Apache Cordova (2024), il framework supporta 10 piattaforme mobili, tra cui iOS, Android, Windows, macOS ed Electron. Le piattaforme principali rimangono Android e iOS, che rappresentano oltre il 95% di tutti i progetti Cordova.

Architettura di Cordova: come funzionano WebView e il ponte

L’architettura di Apache Cordova è composta da quattro livelli: l’applicazione web, WebView, il ponte dei plugin e i plugin nativi. Ogni livello è isolato, consentendo di sostituire i componenti senza modificare il resto del sistema.

WebView e visualizzazione dell’interfaccia

WebView in Cordova è un componente di sistema del OS che visualizza una pagina web come parte di un’applicazione nativa. Su iOS utilizza WKWebView (da iOS 9+), su Android — Android System WebView (da Android 5+). Il framework carica in WebView il punto di ingresso index.html con tutte le risorse dell’applicazione.

Secondo WebKit Team (2024), WKWebView consuma il 50% di memoria in meno rispetto a UIWebView, utilizzato nelle prime versioni di Cordova. Questo è cruciale per i dispositivi mobili con RAM limitata.

Ponte tra JavaScript e codice nativo

Il ponte è il meccanismo chiave di Cordova che permette al codice JavaScript di chiamare funzioni native. Quando un’applicazione invoca un plugin, Cordova serializza la richiesta in JSON e la invia tramite il protocollo URL di WebView (modificando location.href con uno schema personalizzato). Il lato nativo intercetta questa richiesta, esegue l’operazione necessaria e restituisce il risultato.

Questo meccanismo funziona in modo asincrono: la chiamata a un plugin restituisce una Promise che viene risolta dopo il completamento dell’operazione nativa. Secondo i test di IBM Research (2023), la latenza del ponte è di 2–5 ms per operazioni semplici e fino a 50 ms per operazioni di I/O.

Plugin nativi

Ogni plugin di Cordova è un pacchetto con un’interfaccia JavaScript e un’implementazione nativa per ogni piattaforma. Su iOS i plugin sono scritti in Objective-C o Swift, su Android — in Java o Kotlin. La parte JavaScript del plugin fornisce allo sviluppatore un’API basata su Promise, mentre la parte nativa esegue le chiamate di sistema.

Il set standard include più di 30 plugin: Battery Status, Camera, Contacts, Device Motion, File, Geolocation, InAppBrowser, Media, Network Information, Splashscreen, Statusbar, Vibration e altri.

Cordova CLI e sistema di gestione dei plugin

La riga di comando Cordova CLI è lo strumento principale per creare, compilare e gestire i progetti. Fornisce comandi per l’inizializzazione del progetto, l’aggiunta di piattaforme e l’installazione di plugin tramite un’interfaccia unificata.

Il flusso di lavoro include tre comandi di base: cordova create per creare un progetto, cordova platform add ios/android per aggiungere piattaforme target e cordova plugin add per installare plugin dal registro npm.

• cordova create — crea la struttura del progetto con www/, hooks/ e config.xml
• cordova platform add — scarica e configura progetti nativi per iOS o Android
• cordova plugin add — installa un plugin e lo registra nella configurazione del progetto
• cordova build — compila l’applicazione in APK o IPA tramite Xcode e Android Studio

Tutte le impostazioni del progetto sono memorizzate nel file config.xml nella directory principale. In esso vengono specificati il nome dell’applicazione, l’identificatore del pacchetto, le orientazioni dello schermo supportate, le icone e l’elenco dei plugin installati. Il file utilizza il formato XML W3C Widget Package, consentendo di integrare il progetto con qualsiasi strumento di compilazione, inclusi i sistemi CI/CD Jenkins e GitHub Actions.

Esempi di codice: plugin e configurazione

Consideriamo un esempio di file di configurazione config.xml per un progetto Cordova con supporto per fotocamera e geolocalizzazione.

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

Questo config.xml dichiara i plugin per fotocamera e geolocalizzazione e consente connessioni HTTP/HTTPS per caricare dati dal server. Cordova li collega automaticamente durante la compilazione e li rende accessibili tramite gli oggetti globali navigator.camera e navigator.geolocation.

Esempio di chiamata al plugin della fotocamera dal codice JavaScript dell’applicazione:

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 }
  );
}

La funzione capturePhoto chiama la fotocamera nativa tramite il plugin cordova-plugin-camera. Il callback di successo riceve l’immagine in formato base64, dopodiché viene visualizzata sulla pagina. La gestione degli errori è obbligatoria — l’utente potrebbe rifiutare la richiesta di accesso alla fotocamera.

Limitazioni di Cordova e migrazione a Capacitor

Nonostante la sua popolarità, Apache Cordova presenta una serie di limitazioni che hanno portato all’emergere dell’alternativa Capacitor del team Ionic. I problemi principali riguardano le prestazioni del ponte, il supporto degli standard web moderni e la complessità del debug.

Il ponte tramite il protocollo URL di WebView è più lento del ponte JavaScript diretto in Capacitor. Con chiamate frequenti alle API native, come quando si lavora con la fotocamera in tempo reale, questa differenza diventa evidente. Cordova inoltre non supporta pienamente le capacità moderne di WebView senza plugin aggiuntivi.

Un’altra limitazione è la mancanza di supporto integrato per Live Reload sul dispositivo senza strumenti di terze parti. Lo sviluppo con Cordova richiede la ricompilazione del progetto dopo ogni modifica del codice, rallentando il ciclo di sviluppo rispetto a Capacitor o React Native.

Secondo il team Ionic (2024), oltre il 60% dei nuovi progetti ibridi sceglie Capacitor invece di Cordova. Tuttavia, i progetti Cordova esistenti rimangono funzionanti — il framework continua a ricevere aggiornamenti di sicurezza dall’Apache Software Foundation.

Ecosistema Cordova: PhoneGap, Monaca e altri

Apache Cordova è diventato la base per diverse piattaforme e servizi commerciali che ne estendono le funzionalità e forniscono strumenti di sviluppo aggiuntivi. PhoneGap di Adobe è stata la prima e più famosa distribuzione di Cordova.

PhoneGap aggiunge il servizio cloud PhoneGap Build, che permette di compilare applicazioni senza installare Xcode o Android Studio. Lo sviluppatore carica il codice sorgente sul server Adobe e riceve file APK e IPA pronti. Ciò era particolarmente comodo per i team senza infrastruttura Mac.

Altre piattaforme basate su Cordova includono Monaca (IDE cloud) e Framework7. Monaca fornisce un ambiente di sviluppo completo nel browser con simulatore di dispositivo e integrazione con i plugin Cordova. Framework7 utilizza Cordova come backend per il rendering, offrendo un proprio set di componenti UI.

Nonostante il declino della popolarità di Cordova dopo il rilascio di Flutter e React Native, l’ecosistema rimane rilevante per la manutenzione di progetti legacy e scenari di nicchia dove la facilità d’ingresso per gli sviluppatori web è fondamentale. Le applicazioni aziendali con requisiti atipici di accesso all’hardware spesso rimangono su Cordova grazie alla sua vasta libreria di plugin collaudati.

Per la migrazione da Cordova a Capacitor, esiste una guida passo passo del team Ionic che include la sostituzione degli script di inizializzazione in index.html e l’aggiornamento della configurazione. La sfida principale è verificare la compatibilità dei plugin Cordova personalizzati con la nuova architettura del ponte di Capacitor.