Skip to content

Instantly share code, notes, and snippets.

@robdmoore

robdmoore/_readme.md

Last active October 8, 2022 13:57
Show Gist options
  • Save robdmoore/5e041f00a55b4c100395 to your computer and use it in GitHub Desktop.
Save robdmoore/5e041f00a55b4c100395 to your computer and use it in GitHub Desktop.
Download ZIP
HelloWorld Cordova and PhoneGap app differences
Raw
_readme.md

The _'s in the file names are representative of a folder path.

The following is the console output of how these files were generated:

C:\Windows\system32>cordova -v
3.5.0-0.2.6

C:\Windows\system32>phonegap -v
3.5.0-0.20.7

C:\Windows\system32>cd c:\dev\temp

c:\dev\temp>mkdir cordova-test

c:\dev\temp>cd cordova-test

c:\dev\temp\cordova-test>phonegap create pg
[phonegap] missing library com.phonegap.helloworld/www/3.5.0
[phonegap] downloading https://github.com/phonegap/phonegap-app-hello-world/arch
ive/3.5.0.tar.gz...
[phonegap] create called with the options c:\dev\temp\cordova-test\pg com.phoneg
ap.helloworld HelloWorld
[phonegap] Customizing default config.xml file
[phonegap] created project at c:\dev\temp\cordova-test\pg

c:\dev\temp\cordova-test>cordova create cd
Creating a new cordova project with name "HelloCordova" and id "io.cordova.hello
cordova" at location "c:\dev\temp\cordova-test\cd"
Downloading cordova library for www...
Download complete

c:\dev\temp\cordova-test>

Here is the difference in file structure:

c:\dev\temp\cordova-test>cd cd

c:\dev\temp\cordova-test\cd>tree /f
Folder PATH listing
Volume serial number is 00000054 02DC:669B
C:.
│   config.xml
│
├───hooks
│       README.md
│
├───platforms
├───plugins
└───www
    │   index.html
    │
    ├───css
    │       index.css
    │
    ├───img
    │       logo.png
    │
    └───js
            index.js


c:\dev\temp\cordova-test\cd>cd ..\pg

c:\dev\temp\cordova-test\pg>tree /f
Folder PATH listing
Volume serial number is 00000040 02DC:669B
C:.
├───.cordova
│       config.json
│
├───hooks
│       README.md
│
├───platforms
├───plugins
└───www
    │   config.xml
    │   icon.png
    │   index.html
    │   spec.html
    │
    ├───css
    │       index.css
    │
    ├───img
    │       logo.png
    │
    ├───js
    │       index.js
    │
    ├───res
    │   │   .pgbomit
    │   │
    │   ├───icon
    │   │   ├───android
    │   │   │       icon-36-ldpi.png
    │   │   │       icon-48-mdpi.png
    │   │   │       icon-72-hdpi.png
    │   │   │       icon-96-xhdpi.png
    │   │   │
    │   │   ├───bada
    │   │   │       icon-128.png
    │   │   │
    │   │   ├───bada-wac
    │   │   │       icon-48-type5.png
    │   │   │       icon-50-type3.png
    │   │   │       icon-80-type4.png
    │   │   │
    │   │   ├───blackberry
    │   │   │       icon-80.png
    │   │   │
    │   │   ├───ios
    │   │   │       icon-57-2x.png
    │   │   │       icon-57.png
    │   │   │       icon-72-2x.png
    │   │   │       icon-72.png
    │   │   │
    │   │   ├───tizen
    │   │   │       icon-128.png
    │   │   │
    │   │   ├───webos
    │   │   │       icon-64.png
    │   │   │
    │   │   └───windows-phone
    │   │           icon-173-tile.png
    │   │           icon-48.png
    │   │           icon-62-tile.png
    │   │
    │   └───screen
    │       ├───android
    │       │       screen-hdpi-landscape.png
    │       │       screen-hdpi-portrait.png
    │       │       screen-ldpi-landscape.png
    │       │       screen-ldpi-portrait.png
    │       │       screen-mdpi-landscape.png
    │       │       screen-mdpi-portrait.png
    │       │       screen-xhdpi-landscape.png
    │       │       screen-xhdpi-portrait.png
    │       │
    │       ├───bada
    │       │       screen-portrait.png
    │       │
    │       ├───bada-wac
    │       │       screen-type3.png
    │       │       screen-type4.png
    │       │       screen-type5.png
    │       │
    │       ├───blackberry
    │       │       screen-225.png
    │       │
    │       ├───ios
    │       │       screen-ipad-landscape-2x.png
    │       │       screen-ipad-landscape.png
    │       │       screen-ipad-portrait-2x.png
    │       │       screen-ipad-portrait.png
    │       │       screen-iphone-landscape-2x.png
    │       │       screen-iphone-landscape.png
    │       │       screen-iphone-portrait-2x.png
    │       │       screen-iphone-portrait-568h-2x.png
    │       │       screen-iphone-portrait.png
    │       │
    │       ├───tizen
    │       │       README.md
    │       │
    │       ├───webos
    │       │       screen-64.png
    │       │
    │       └───windows-phone
    │               screen-portrait.jpg
    │
    └───spec
        │   helper.js
        │   index.js
        │
        └───lib
            └───jasmine-1.2.0
                    jasmine-html.js
                    jasmine.css
                    jasmine.js
                    MIT.LICENSE


c:\dev\temp\cordova-test\pg>

The main differences are:

  • PhoneGap puts the config.xml file inside of the www directory, whereas Cordova puts it in the root directory.
    • At one point that I tried this actually meant you could't use Cordova anymore unless you had the .cordova directory with the config.json file as shown below, but in trying it since it does work so maybe that was a bug that got fixed?
  • PhoneGap adds a bunch of PhoneGap specific elements and attributes to config.xml
  • PhoneGap includes a bunch of icon and splash screen resources in a www/res folder, but includes .pgbomit in there so they don't add weight to the final binary if packaged using PhoneGapBuild
  • PhoneGap includes unit testing files
Raw
cd_config.xml
<?xml version='1.0' encoding='utf-8'?>
<widget id="io.cordova.hellocordova" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>HelloCordova</name>
<description>
A sample Apache Cordova application that responds to the deviceready event.
</description>
<author email="[email protected]" href="http://cordova.io">
Apache Cordova Team
</author>
<content src="index.html" />
<access origin="*" />
</widget>
Raw
pg_.cordova_config.json
{
"lib": {
"www": {
"id": "com.phonegap.helloworld",
"version": "3.5.0",
"uri": "https://github.com/phonegap/phonegap-app-hello-world/archive/3.5.0.tar.gz"
}
}
}
Raw
pg_www_config.xml
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.phonegap.helloworld" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0">
<name>HelloWorld</name>
<description>
Hello World sample application that responds to the deviceready event.
</description>
<author email="[email protected]" href="http://phonegap.com">
PhoneGap Team
</author>
<preference name="permissions" value="none" />
<preference name="phonegap-version" value="3.5.0" />
<preference name="orientation" value="default" />
<preference name="target-device" value="universal" />
<preference name="fullscreen" value="true" />
<preference name="webviewbounce" value="true" />
<preference name="prerendered-icon" value="true" />
<preference name="stay-in-webview" value="false" />
<preference name="ios-statusbarstyle" value="black-opaque" />
<preference name="detect-data-types" value="true" />
<preference name="exit-on-suspend" value="false" />
<preference name="show-splash-screen-spinner" value="true" />
<preference name="auto-hide-splash-screen" value="true" />
<preference name="disable-cursor" value="false" />
<preference name="android-minSdkVersion" value="7" />
<preference name="android-installLocation" value="auto" />
<gap:plugin name="org.apache.cordova.battery-status" />
<gap:plugin name="org.apache.cordova.camera" />
<gap:plugin name="org.apache.cordova.media-capture" />
<gap:plugin name="org.apache.cordova.console" />
<gap:plugin name="org.apache.cordova.contacts" />
<gap:plugin name="org.apache.cordova.device" />
<gap:plugin name="org.apache.cordova.device-motion" />
<gap:plugin name="org.apache.cordova.device-orientation" />
<gap:plugin name="org.apache.cordova.dialogs" />
<gap:plugin name="org.apache.cordova.file" />
<gap:plugin name="org.apache.cordova.file-transfer" />
<gap:plugin name="org.apache.cordova.geolocation" />
<gap:plugin name="org.apache.cordova.globalization" />
<gap:plugin name="org.apache.cordova.inappbrowser" />
<gap:plugin name="org.apache.cordova.media" />
<gap:plugin name="org.apache.cordova.network-information" />
<gap:plugin name="org.apache.cordova.splashscreen" />
<gap:plugin name="org.apache.cordova.vibration" />
<icon src="icon.png" />
<icon gap:platform="android" gap:qualifier="ldpi" src="res/icon/android/icon-36-ldpi.png" />
<icon gap:platform="android" gap:qualifier="mdpi" src="res/icon/android/icon-48-mdpi.png" />
<icon gap:platform="android" gap:qualifier="hdpi" src="res/icon/android/icon-72-hdpi.png" />
<icon gap:platform="android" gap:qualifier="xhdpi" src="res/icon/android/icon-96-xhdpi.png" />
<icon gap:platform="blackberry" src="res/icon/blackberry/icon-80.png" />
<icon gap:platform="blackberry" gap:state="hover" src="res/icon/blackberry/icon-80.png" />
<icon gap:platform="ios" height="57" src="res/icon/ios/icon-57.png" width="57" />
<icon gap:platform="ios" height="72" src="res/icon/ios/icon-72.png" width="72" />
<icon gap:platform="ios" height="114" src="res/icon/ios/icon-57-2x.png" width="114" />
<icon gap:platform="ios" height="144" src="res/icon/ios/icon-72-2x.png" width="144" />
<icon gap:platform="webos" src="res/icon/webos/icon-64.png" />
<icon gap:platform="winphone" src="res/icon/windows-phone/icon-48.png" />
<icon gap:platform="winphone" gap:role="background" src="res/icon/windows-phone/icon-173.png" />
<gap:splash gap:platform="android" gap:qualifier="port-ldpi" src="res/screen/android/screen-ldpi-portrait.png" />
<gap:splash gap:platform="android" gap:qualifier="port-mdpi" src="res/screen/android/screen-mdpi-portrait.png" />
<gap:splash gap:platform="android" gap:qualifier="port-hdpi" src="res/screen/android/screen-hdpi-portrait.png" />
<gap:splash gap:platform="android" gap:qualifier="port-xhdpi" src="res/screen/android/screen-xhdpi-portrait.png" />
<gap:splash gap:platform="blackberry" src="res/screen/blackberry/screen-225.png" />
<gap:splash gap:platform="ios" height="480" src="res/screen/ios/screen-iphone-portrait.png" width="320" />
<gap:splash gap:platform="ios" height="960" src="res/screen/ios/screen-iphone-portrait-2x.png" width="640" />
<gap:splash gap:platform="ios" height="1136" src="res/screen/ios/screen-iphone-portrait-568h-2x.png" width="640" />
<gap:splash gap:platform="ios" height="1024" src="res/screen/ios/screen-ipad-portrait.png" width="768" />
<gap:splash gap:platform="ios" height="768" src="res/screen/ios/screen-ipad-landscape.png" width="1024" />
<gap:splash gap:platform="winphone" src="res/screen/windows-phone/screen-portrait.jpg" />
<access origin="*" />
</widget>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment