Evitare la sovrapposizione della Status Bar su iOS con Cordova

Lavorando con Cordova (Phonegap) per iOS uno dei problemi in cui è possibile imbattersi è la sovrapposizione della status bar con il contenuto delle nostre schermate che, oltre ad inficiare negativamente sul risultato visivo dell'applicazione, va a limitare le funzionalità dell'app qualora alcuni bottoni o tasti azione vadano ad occupare quella parte di spazio, come mostrato di seguito (Fig. 1):

Fig. 1 - Apache Cordova - Phonegap - Status bar sovrapposta su iOS

In giro si trovano soluzioni datate che utilizzano il plugin obsoleto org.apache.cordova.statusbar, ed il risultato dell'esecuzione del comando per la sua installazione (cordova plugin add org.apache.cordova.statusbar) è il seguente:

cordova plugin add org.apache.cordova.statusbar

Fetching plugin "org.apache.cordova.statusbar" via npm
WARNING: org.apache.cordova.statusbar has been renamed to cordova-plugin-statusbar. 
You may not be getting the latest version! We suggest you `cordova plugin rm org.apache.cordova.statusbar` and `cordova plugin add cordova-plugin-statusbar`

Come si evince dalla risposta del WARNING il plugin da utilizzare, per garantire che sia aggiornato all'ultima versione stabile, ha il nome modificato ed il comando da lanciare è il seguente:

cordova plugin add cordova-plugin-statusbar

Le modifiche da apportare per ottenere il risultato desiderato interessano anche il file config.xml e nello specifico si riferiscono al cambio di impostazioni e valori per la status bar come di seguito:

<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#000000" />
<preference name="StatusBarStyle" value="lightcontent" />

Il risultato è il seguente:

Fig. 2 - Apache Cordova - Phonegap - Status bar corretta su iOS

Il valore fondamentale è quello booleano per StatusBarOverlaysWebView mentre gli altri due interessano rispettivamente il colore della status bar e quello del suo contenuto.