phonegap plugin not working - connection undefined

Question

According to the phone gap docs I should be able to add the network cocnnection plugin by simply adding <gap:plugin name="org.apache.cordova.network-information" /> to config.xml

I'm using the example js function to test the connection and it does not seem to work. LogCat is showing 'cannot read property 'type' of undefined' which makes me think the plugin was never added.

function checkConnection() {
var networkState = navigator.connection.type;

var states = {};
states[Connection.UNKNOWN]  = 'Unknown connection';
states[Connection.ETHERNET] = 'Ethernet connection';
states[Connection.WIFI]     = 'WiFi connection';
states[Connection.CELL_2G]  = 'Cell 2G connection';
states[Connection.CELL_3G]  = 'Cell 3G connection';
states[Connection.CELL_4G]  = 'Cell 4G connection';
states[Connection.CELL]     = 'Cell generic connection';
states[Connection.NONE]     = 'No network connection';

alert('Connection type: ' + states[networkState]);

}

config.xml:

<?xml version="1.0" encoding="UTF-8" ?>
<widget xmlns   = "http://www.w3.org/ns/widgets"
    xmlns:gap   = "http://phonegap.com/ns/1.0"
    id          = "#myapp#"
    versionCode = "10" 
    version     = "1.0.0" >

<!-- versionCode is optional and Android only -->

<name>#myapp#"</name>

<description>
    #myapp#"
</description>

<author href="#myapp#"" email="#myapp#"">#myapp#"</author>

<!-- Customize your app and platform with the preference element. -->
<preference name="phonegap-version"           value="3.1.0" />          <!-- all: current version of PhoneGap -->
<preference name="orientation"                value="default" />        <!-- all: default means both landscape and portrait are enabled -->
<preference name="target-device"              value="universal" />      <!-- all: possible values handset, tablet, or universal -->
<preference name="fullscreen"                 value="false" />           <!-- all: hides the status bar at the top of the screen -->
<preference name="prerendered-icon"           value="true" />           <!-- ios: if icon is prerendered, iOS will not apply it's gloss to the app's icon on the user's home screen -->
<preference name="ios-statusbarstyle"         value="black-opaque" />   <!-- ios: black-translucent will appear black because the PhoneGap webview doesn't go beneath the status bar -->
<preference name="detect-data-types"          value="true" />           <!-- ios: controls whether data types (such as phone no. and dates) are automatically turned into links by the system -->
<preference name="exit-on-suspend"            value="false" />          <!-- ios: if set to true, app will terminate when home button is pressed -->
<preference name="auto-hide-splash-screen"    value="true" />           <!-- ios: if set to false, the splash screen must be hidden using a JavaScript API -->
<preference name="disable-cursor"             value="false" />          <!-- blackberry: prevents a mouse-icon/cursor from being displayed on the app -->
<preference name="android-minSdkVersion"      value="14" />              <!-- android: MIN SDK version supported on the target device. MAX version is blank by default. -->
<preference name="android-installLocation"    value="auto" />           <!-- android: app install location. 'auto' will choose. 'internalOnly' is device memory. 'preferExternal' is SDCard. -->
<preference name="splash-screen-duration"     value="10000"/>


<!-- Plugins -->

<!-- Core plugins
<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.splashscreen" />
<gap:plugin name="org.apache.cordova.vibration" />
-->
<gap:plugin name="org.apache.cordova.network-information" />

<!-- Third party plugins -->
<!-- A list of available plugins are available at https://build.phonegap.com/plugins -->
<!-- 
    <gap:plugin name="com.phonegap.plugins.barcodescanner" />
-->

<!-- Define app icon for each platform.     -->

<icon src="icon.png" />
<icon src="tools/images/icons/36.png"   gap:platform="android"    gap:density="ldpi" />
<icon src="tools/images/icons/48.png"   gap:platform="android"    gap:density="mdpi" />
<icon src="tools/images/icons/72.png"   gap:platform="android"    gap:density="hdpi" />
<icon src="tools/images/icons/96.png"   gap:platform="android"    gap:density="xhdpi" />
<icon src="tools/images/icons/57.png"   gap:platform="ios"        width="57" height="57" />
<icon src="tools/images/icons/72.png"   gap:platform="ios"        width="72" height="72" />
<icon src="tools/images/icons/114.png"  gap:platform="ios"        width="114" height="114" />
<icon src="tools/images/icons/144.png"  gap:platform="ios"        width="144" height="144" />
<icon src="tools/images/icons/64.png"   gap:platform="webos" />
<icon src="tools/images/icons/48.png"   gap:platform="winphone" />
<icon src="tools/images/icons/173.png"  gap:platform="winphone"   gap:role="background" />

<!-- Define app splash screen for each platform.    -->
<gap:splash src="tools/images/splash/android/320x426.9.png" gap:platform="android" gap:density="ldpi" />
<gap:splash src="tools/images/splash/android/320x470.9.png" gap:platform="android" gap:density="mdpi" />
<gap:splash src="tools/images/splash/android/480x640.9.png" gap:platform="android" gap:density="hdpi" />
<gap:splash src="tools/images/splash/android/720x960.9.png" gap:platform="android" gap:density="xhdpi" />
<gap:splash src="tools/images/splash/ios/320x480.jpg"       gap:platform="ios"     width="320" height="480" />
<gap:splash src="tools/images/splash/ios/640x960.jpg"       gap:platform="ios"     width="640" height="960" />
<gap:splash src="tools/images/splash/ios/768x1024.jpg"      gap:platform="ios"     width="768" height="1024" />
<gap:splash src="tools/images/splash/ios/1024x768.jpg"      gap:platform="ios"     width="1024" height="768" />
<gap:splash src="tools/images/splash/ios/320x480.jpg"       gap:platform="winphone" />
<!--
    Define access to external domains.

    <access />            - a blank access tag denies access to all external resources.
    <access origin="*" /> - a wildcard access tag allows access to all external resource.

    Otherwise, you can specify specific domains:
-->
<access origin="*"/> <!-- allow local pages -->
<!--
    <access origin="http://phonegap.com" />                    - allow any secure requests to http://phonegap.com/
    <access origin="http://phonegap.com" subdomains="true" />  - same as above, but including subdomains, such as http://build.phonegap.com/
-->

Im new to phonegap, and have never used a phonegap plugin before.

I'm using phonegap version 3.1

Answer 1

Turns out I need to add cordova.js to index.html. EXACTLY like so:

<script type="text/javascript" charset="utf-8" src="cordova.js"></script>

If you are using the build.phonegap.com web service; which I am. The Phonegap builder will find and include the correct cordova.js file for each build (Android, Win phone, iOS). You DO NOT need to actually have the cordova.js file in the package you upload to build.phonegap.com... the service adds it for you dynamically :)(:

Thanks to @george-siggouroglou for the help in another question.