By default a PhoneGap app consists only of a WebView showing the HTML code written by you. The native functionalities offered by the phone (Batter, Camera, Contacts etc.) is available through special JavaScript calls, but only if you install the proper plugins into your project.

Plugins can be separated in 3 categories:

1. Core plugins (the plugins officially developed by the cordova team)
2. Public Repository plugins (any public plugin on npm, github or phonegap repositories)
3. Custom plugins which you manually develop and include in your project

In order to check which plugins are installed in your project you need to run a shell/cmd and go to the root folder of the project than type in the command:

phonegap plugins ls

This command will list all the installed plugins.

For installing plugins the command is

phonegap plugins add package-name

for plugins in the npm registry or phonegap example :

phonegap plugins add org.apache.cordova.camera" 
to install the official camera plugin

or

phonegap plugins add url-to-github-projects

example:

phonegap plugins add https://github.com/apache/cordova-plugin-console.git

There is also the possibility to search for plugins directly from console with

phonegap plugins search multiple-search-words

example:

phonegap plugins search bar code

For more tutorials on the PhoneGap check this page but use “phonegap” instead of “cordova”.

If you are going to build only using the PhoneGap Build cloud service there is no need to install the plugins locally since you are not going to upload them on the server. All you need to do is edit the config.xml to tell the builder which plugins to include. The most simple way to do this is by adding the line

<gap:plugin name="package name" />

example:

<gap:plugin name="com.phonegap.plugins.example" />

you can also add version to it to be sure that in future build you won't get another version than the one you tested:

<gap:plugin name="com.phonegap.plugins.example" version="2.2.1" />

For more information check here

1. Battery Offers battery information and events to check battery status
2. Camera Allows capture of video/photo with either front or back camera by using the native capture app. Also allows use pictures/videos from the gallery
3. Capture Captures images/audio/video
4. Console used for debugging
5. Contacts Allows to Create/Edit/Find contacts
6. Device Device information
7. Device Motion gives access to the accelerometer
8. Device Orientation fives access to the magnetic compas
9. File File storage API
10. File Transfer Makes File transfers over HTTP POST via mutli-part encoding
11. Geolocation Get and track position
12. Globalization Get globalization/language information from the device
13. InAppBrowser open a webpage inside your app
14. Media Play/Record Audio
15. Network Information Gives information about the network connection (Ex: 2G/3G/4G/Wi-Fi) + offline/online events
16. Notification Alert boxes native to the phone (to not be confused with Push Notifications)
17. Splashscreen
18. Vibration

For a list of 3rd party plugins in the repository check here

While some features need plugins to become available to our code, others are just mapped over the native HTML5 javascript methods and events. Example: window.DeviceOrientationEvent returns information from the gyroscope

Such is also the case of the 3 HTML5 storage APIs which do not need installing plugins.

localStorage is a simple system to store key/pair values. In order to store object is recommended to stringify them.

Supported platforms:

• Android
• BlackBerry WebWorks (OS 6.0 and higher)
• iOS
• Tizen
• Windows Phone 7 and 8

Set:

window.localStorage.setItem("key", "value");

Get:

var value = window.localStorage.getItem("key");

Remove:

window.localStorage.removeItem("key");

Supported platforms:

• Android
• BlackBerry 10
• iOS
• Tizen

WebSQL is a client side SQL-query driven database.

In order to create or open an existing database:

var db = window.openDatabase(database_name,version,description, allocated_memory);

If a database with a previous existing name and version is opened the already existing db will be accessed, otherwise a new one will be created. In order to run SQL queries they must be grouped into transactions:

db.transaction(function (tx) {
  tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
  tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")');
  tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")');
});

In order to retrieve the results we will need to give a callback to the execute sql method:

tx.executeSQL(sql_query,optiona_arguments,callback);

where the callback should be a function that takes transaction and result_set as argument:

tx.executeSQL(sql_query,optiona_arguments,function(tx,result){
   //the insert id of the last insert is in result.insertID
   //the rows returned by the query are in result.rows
   // result.rowsAffected contains the number of rows.
});

Supported platforms:

• BlackBerry 10
• Firefox OS
• Windows Phone 8
• Windows 8

Since neither WebSQL nor IndexedDB don't offer full support yet we won't focus on those to technologies in this class. For a detailed tutorial on IndexedDB check MDN (Mozilla Developer Network)