Apple, when developing a browser for iOS decided to leverage an open source project, KHTML the HTML layout engine for KDE (a Linux GUI and suite of software). The core of the iOS browser is called WebKit and allows other applications on the OS to incorporate it's functionality as well.
This means that iOS applications can render web pages.
Since Apple based this all on an open Source project, they were compelled to make their code open source as well. http://www.webkit.org
This enabled Google to incorporate it in Android and many others to incorporate it as well: http://trac.webkit.org/wiki/Applications%20using%20WebKit
Nitobi, a small private company located in Vancouver developed PhoneGap as a means to create cross platform applications based on rendering HTML and executing JavaScript inside of a WebKit component.
Essentially, PhoneGap bridges the gap between web applications and native applications by allowing web applications to be turned into native applications.
Supported Platforms: http://en.wikipedia.org/wiki/PhoneGap#Supported_platforms
Other Frameworks: http://en.wikipedia.org/wiki/Multiple_phone_web_based_application_framework
Late last year, Adobe purchased Nitobi: http://www.adobe.com/aboutadobe/pressroom/pressreleases/201110/AdobeAcquiresNitobi.html (Flash is dead on mobile?)
Apps made on PhoneGap: http://www.phonegap.com/app
PhoneGap started with Android guide: http://docs.phonegap.com/en/2.0.0/guide_getting-started_android_index.md.html#Getting%20Started%20with%20Android
Build for 7 OS's in one step: https://build.phonegap.com
Getting Started: https://build.phonegap.com/docs/start
Docs: https://build.phonegap.com/docs
<html>
<head>
<script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for PhoneGap to load
document.addEventListener("deviceready", onDeviceReady, false);
// PhoneGap is ready
function onDeviceReady() {
//playAudio("http://audio.ibeat.org/content/p1rj1s/p1rj1s_-_rockGuitar.mp3");
}
// Audio player
var my_media = null;
var mediaTimer = null;
// Play audio
function playAudio() {
var src="http://www.mobvcasting.com/phonegap_workshop/sound_example/funsound.mp3";
// Create Media object from src
my_media = new Media(src, onSuccess, onError);
// Play audio
my_media.play();
}
// onSuccess Callback
function onSuccess() {
console.log("playAudio():Audio Success");
}
// onError Callback
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
</script>
<title>My Cool App</title>
</head>
<body>
<a href="#" onClick="playAudio();">Play Sound</a>
</body>
</html>
PhoneGap has a decent GeoLocation API built in: http://docs.phonegap.com/en/2.0.0/cordova_geolocation_geolocation.md.html#Geolocation
Let's go through an example:
<!DOCTYPE html]]>
<html>
<head>
<title>PhoneGap Location Tracking Example</title>
<!-- Documentation here: http://docs.phonegap.com/en/2.0.0/cordova_geolocation_geolocation.md.html#Geolocation -->
<!-- Always include the PhoneGap JavaScript -->
<script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script>
<!-- Then you can write JavaScript that utilizes it -->
<script type="text/javascript" charset="utf-8">
// This event listener is used so that we don't try to run things before we are ready.
// Anything that you want to run first should be put on the method specified here
// "onDeviceReady"
document.addEventListener("deviceready", onDeviceReady, false);
// Global variable that holds the ID returned by our geolocation call
var geoWatchID = null;
// The onDeviceReady function, code here is run when the device is ready
function onDeviceReady() {
// If we don't get an update in 30 seconds (30000 milliseconds) throw an error
var options = { timeout: 30000 };
// Tell PhoneGap (navigator) that we want to track the position
// Call onSuccess when an update occurs
// Call onError when an error occurs
// Passing in the options we specified above
watchID = navigator.geolocation.watchPosition(onSuccess, onError, options);
}
// When we get an update, the onSuccess method, receives a "position" object
function onSuccess(position) {
// http://docs.phonegap.com/en/2.0.0/cordova_geolocation_geolocation.md.html#Coordinates
// position.coords.latitude
// position.coords.longitude
// position.coords.speed
// ...
// Standard way with DHTML to get an ID within the content of the page
// Here we are getting the "geolocation" <p> tag
var element = document.getElementById('geolocation');
// Now we can set it's contents using the innerHTML property
element.innerHTML = 'Latitude: ' + position.coords.latitude + '<br />' +
'Longitude: ' + position.coords.longitude + '<br />' +
'<hr />' + element.innerHTML;
}
// onError Callback receives a PositionError object
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
</script>
</head>
<body>
<p id="geolocation">Watching geolocation...</p>
</body>
</html>