PhoneGap: essentie, mogelijkheden en het maken van apps op het Adobe-platform

Wat is PhoneGap?

PhoneGap — is een platform voor mobiele app-ontwikkeling, oorspronkelijk gemaakt door Nitobi Software in 2009. In 2011 nam Adobe Nitobi over en bracht PhoneGap uit als commercieel product, waarbij de kern van het framework werd overgedragen aan de Apache Software Foundation onder de naam Cordova.

Geschiedenis en evolutie

PhoneGap werd gemaakt op de iPhoneDevCamp-conferentie in 2008, waar ontwikkelaars van Nitobi Software de technologie demonstreerden van het inpakken van webapps in een native container. De eerste openbare versie verscheen in 2009 en trok onmiddellijk de aandacht van de webontwikkelaarsgemeenschap die manieren zocht om de mobiele markt te betreden zonder Objective-C te leren.

De belangrijkste innovatie van PhoneGap was dat ontwikkelaars bekende webtechnologieën — HTML, CSS en JavaScript — konden gebruiken om apps te maken die via app-winkels op het apparaat worden geïnstalleerd en toegang hebben tot native functies: camera, GPS, contacten en accelerometer.

Volgens Adobe Developer Relations (2015) gebruikten in de piekperiode meer dan 600 duizend ontwikkelaars wereldwijd PhoneGap. Het platform was vooral populair onder webstudio's en freelancers die hun portfolio wilden uitbreiden met mobiele projecten zonder iOS- en Android-ingenieurs in te huren.

Verschillen tussen PhoneGap en Apache Cordova

Het belangrijkste verschil tussen PhoneGap en Apache Cordova zit in het distributiemodel en de extra diensten. Cordova is een puur open-source framework beheerd door de Apache Foundation, terwijl PhoneGap de commerciële distributie is met exclusieve Adobe-mogelijkheden.

Het belangrijkste voordeel en het belangrijkste commerciële verschil van PhoneGap ten opzichte van Apache Cordova — is de PhoneGap Build-dienst, die de compilatiefase overneemt. De ontwikkelaar uploadt de bronbestanden naar de Adobe-server, selecteert de doelplatforms en ontvangt kant-en-klare binaire bestanden zonder installatie van Android SDK, Xcode en bijbehorende compilatietools.

Daarnaast bevatte PhoneGap integratie met Adobe Creative Cloud, waarmee ontwerpers ontwerpen uit Photoshop rechtstreeks naar de PhoneGap-projectstructuur konden exporteren. Deze functie was gewild in kleine teams zonder speciale mobiele ontwikkelaar.

PhoneGap Build: cloudcompilatie van apps

PhoneGap Build — is een Adobe-webservice die de broncode van PhoneGap/Cordova-apps compileert naar installatiebestanden voor iOS (.ipa), Android (.apk), Windows Phone (.xap) en andere platforms. De gebruiker hoeft geen SDK's van de doelbesturingssystemen op de computer te installeren.

Het compilatieproces bestaat uit drie stappen: de ontwikkelaar archiveert het project (of wijst een Git-repository aan), uploadt het naar build.phonegap.com en selecteert de platforms. Na enkele minuten retourneert de server kant-en-klare binaire bestanden voor upload naar app-winkels.

PhoneGap Build ondersteunde twee soorten abonnementen: gratis (tot 2 apps, openbare compilatie) en betaald (tot 25 apps, privécompilatie, aangepaste pictogrammen en certificaten). Voor iOS was een uploadcertificaat van het Apple Developer Program vereist, dat de gebruiker in zijn persoonlijke account uploadde. Het werkingsmechanisme van Build was eenvoudig: de gebruiker stuurde een ZIP-archief of gaf een Git-repository op, de server bepaalde automatisch de platforms en retourneerde kant-en-klare binaire bestanden via het bedieningspaneel.

Volgens Adobe Blog (2017) werden er maandelijks meer dan 500 duizend compilaties via PhoneGap Build uitgevoerd. De dienst was vooral populair in onderwijsinstellingen en op hackathons waar deelnemers geen toegang hadden tot Mac-infrastructuur. Ontwikkelaars gebruikten Build ook voor het demonstreren van prototypes aan klanten rechtstreeks op apparaten zonder omgevingsconfiguratie.

Voorbeelden van PhoneGap-code en configuratie

De structuur van een PhoneGap-project is identiek aan Cordova. Het verschil zit alleen in het configuratiebestand config.xml, waar het element <gap> wordt toegevoegd met de specificatie van de PhoneGap-versie en de Adobe-applicatie-ID.

<?xml version='1.0' encoding='utf-8'?>
<widget id='com.adobe.phonegap.app'
        version='1.0.0'
        xmlns='http://www.w3.org/ns/widgets'
        xmlns:gap='http://phonegap.com/ns/1.0'>
    <name>PhoneGapApp</name>
    <description>
        PhoneGap-app
    </description>
    <gap:platform name='ios' />
    <gap:platform name='android' />
    <gap:plugin name='cordova-plugin-camera' />
    <gap:config platform='ios' min-version='13.0' />
</widget>

Dit configuratiebestand definieert een app met ondersteuning voor iOS en Android, specificeert de minimale versie iOS 13 en sluit de camera-plugin aan. Bij upload naar PhoneGap Build herkent de server automatisch deze instellingen en compileert het project met de benodigde afhankelijkheden.

Voorbeeld van basis JavaScript-code met afhandeling van de device ready-gebeurtenis en aanroep van een native dialoog:

document.addEventListener('deviceready', function() {
  console.log('PhoneGap klaar voor gebruik');

  document.getElementById('btnAlert')
    .addEventListener('click', function() {
      navigator.notification.alert(
        'Hallo van PhoneGap!',
        function() { console.log('OK'); },
        'Bericht',
        'Sluiten'
      );
    });
});

De deviceready-gebeurtenis — verplicht toegangspunt in alle PhoneGap- en Cordova-apps. Zonder deze gebeurtenis werken aanroepen van native API's niet omdat de brug nog niet is geïnitialiseerd. Na gereedheid zijn alle plugins beschikbaar, inclusief notification.alert voor native dialoogvensters.

Voor- en nadelen van PhoneGap

PhoneGap had een aantal voordelen die het populair maakten midden jaren 2010, maar ook beperkingen die na 2018 leidden tot een daling van het marktaandeel.

Sterke punten

Het belangrijkste voordeel van PhoneGap — lage instapdrempel voor webontwikkelaars. HTML, CSS en JavaScript zijn technologieën die elke frontend-specialist kent, waardoor webstudio's snel de mobiele app-markt konden betreden zonder iOS- en Android-ingenieurs in te huren.

De clouddienst PhoneGap Build loste het infrastructuurprobleem op: teams op Windows konden iOS-apps compileren zonder een Mac te kopen. Dit was cruciaal voor startups met een beperkt budget voor apparatuur.

Zwakke punten

Het grootste nadeel van PhoneGap — prestaties. WebView is langzamer dan native UI-frameworks, vooral bij complexe animaties, grote lijsten en grafische verwerking. Volgens HTML5Rocks-tests (2016) duurde het renderen van een lijst met 1000 elementen in PhoneGap 200–400 ms tegen 16–30 ms in een native app.

Extra beperkingen waren onder meer afhankelijkheid van de WebView-versie op het apparaat van de gebruiker, problemen met het debuggen van native plugins en gebrek aan toegang tot nieuwe iOS- en Android-API's tot de release van de bijbehorende Cordova-plugins.

PhoneGap vandaag: ondersteuning en migratie

In 2020 kondigde Adobe aan te stoppen met de ondersteuning van PhoneGap en PhoneGap Build. Het bedrijf droeg de ontwikkelingen over aan de gemeenschap met de aanbeveling over te stappen op Apache Cordova of Capacitor. PhoneGap Build werd gesloten en cloudcompilatie is niet langer beschikbaar.

Voor bestaande PhoneGap-projecten wordt migratie naar Capacitor aanbevolen — dit is de meest directe route met minimale codewijzigingen. Het volstaat om de initialisatiescripts te vervangen en de configuratie bij te werken. Alle JavaScript-code en HTML-sjablonen blijven ongewijzigd omdat Capacitor dezelfde brugprincipes gebruikt.

Een alternatieve optie — directe overstap naar Apache Cordova. Dit vereist lokale installatie van platforms via CLI en configuratie van lokale compilatie, maar behoudt volledige compatibiliteit met bestaande plugins en de app-architectuur.

Ondanks de sluiting is de historische betekenis van PhoneGap moeilijk te overschatten. Juist PhoneGap toonde de markt aan dat webtechnologieën de basis kunnen zijn voor mobiele apps en maakte de weg vrij voor moderne hybride en cross-platform frameworks. Het concept van cloudcompilatie, voor het eerst geïmplementeerd in PhoneGap Build, werd later overgenomen door Ionic Appflow, Visual Studio App Center en andere continuïteitsintegratiediensten voor mobiele projecten.

De architectuurbeslissingen van PhoneGap — de brug via WebView, het pluginsysteem en configuratie via config.xml — werden de de facto standaard voor hybride ontwikkeling. Zelfs in moderne Capacitor-projecten is de erfenis van PhoneGap zichtbaar: dezelfde principes van werken met plugins en een vergelijkbaar compilatieproces.

Voor ontwikkelaars die oude PhoneGap-projecten onderhouden, is de belangrijkste vaardigheid het begrijpen van de pluginbrug en het vermogen om plugins aan te passen aan moderne versies van Android en iOS. Zonder dit wordt het bijwerken van de app naar nieuwe winkelvereisten onmogelijk vanwege verouderde systeemrechten.