Introduction
Notifications represent visual, audible, and tactile device notifications. The supported platforms are Android, Bada, BlackBerry WebWorks and iOS and Windoes Phone. Some of the notification methods are:
notification.alert
notification.confirm
notification.beep
notification.vibrate
notification.alert
It shows a custom alert or dialog box. Most Cordova implementations use a native dialog box for this feature. However, some platforms simply use the browser's alert function, which is typically less customizable. The supported platforms are Android, BlackBerry WebWorks (OS 5.0 and higher), iPhone, Windows Phone 7 (Mango), Bada 1.2 & 2.x and webOS. The syntax is:
navigator.notification.alert (message, alertCallback, [title], [buttonName]);
message : Dialog message (String)
alertCallback : Callback to invoke when alert dialog is dismissed. (Function)
title : Dialog title (String ); it is a optional and the default value is Alert.
buttonName : It is also optional and the default value is "OK"; it represents the button name which is a string.
Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Cordova WP7</title>
<link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title"
charset="utf-8" />
<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for Cordova to load
document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is ready
function onDeviceReady() {
// Empty
}
// alert dialog dismissed
function alertDismissed() {
// do something
}
// Show a custom alert
//
function showAlert() {
navigator.notification.alert(
'You passed the exam', // message
alertDismissed, // callback
'Congratualation!!!!', // title
'Ok' // buttonName
);
}
</script>
</head>
<body>
<p>
<a href="#" onclick="showAlert(); return false;">Show Alert</a></p>
</body>
</html>
Output
The output of this is in Apache Cordova; it looks like:
![notification1.gif]()
When I click on the Show alert link then the alert box opens, like:
![notification2.gif]()
notification.confirm
It shows the customizable confirmation dialog box. Function notification.confirm displays a native dialog box that is more customizable than the browser's confirm function. The confirmCallback is called when the user has pressed one of the buttons on the confirmation dialog box. The callback takes the argument buttonIndex (Number), which is the index of the pressed button. It's important to note that the index uses one-based indexing, so the value will be 1, 2, 3, etc. The supported platforms are Android, BlackBerry WebWorks (OS 5.0 and higher), iPhone, Windows Phone 7 (Mango) and Bada 1.2 & 2.x. The syntax is:
navigator.notification.confirm(message, confirmCallback, [title], [buttonLabels])
message : Dialog message (String).
confirmCallback : Callback to invoke with index of the button pressed (1,2 or 3). It is a function.
title : The default value is "Confirm"; otherwise it is an optional string.
buttonLabels : Comma-separated string with the button labels (string). The default value is "Ok,Cancel".
Example:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Cordova WP7</title>
<link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title"
charset="utf-8" />
<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for Cordova to load
document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is ready
function onDeviceReady() {
// Empty
}
// process the confirmation dialog result
function onConfirm(buttonIndex) {
alert('You selected button ' + buttonIndex);
}
// Show a custom confirmation dialog
function showConfirm() {
navigator.notification.confirm(
'Are you want to Continue the last game!!!!', // message
onConfirm, // callback to invoke with index of button pressed
'New Game', // title
'Yes,No,Exit' // buttonLabels
);
}
</script>
</head>
<body>
<p>
<a href="#" onclick="showConfirm(); return false;">Show Confirm</a></p>
</body>
</html>
Output
The output can be like:
![notification3.gif]()
When I click on the show confirm link the screen will look like, with the confirm box:
![notification4.gif]()
When I click on the first (the Yes) button, the screen will look like:
![notification5.gif]()
Similarly when I click on the second button and the third button. the screen will open as on the first button.
notification.beep
This notification can play a beep sound. The supported platforms are Android, BlackBerry WebWorks (OS 5.0 and higher), iPhone, Windows Phone 7 (Mango) and Bada 1.2 & 2.x. The syntax is:
navigator.notification.beep(times);
times: The number of times to repeat the beeps (numbers).
Example:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Cordova WP7</title>
<link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title"
charset="utf-8" />
<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for Cordova to load
document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is ready
function onDeviceReady() {
// Empty
}
// Show a custom alert
function showAlert() {
navigator.notification.alert(
'You are the winner!', // message
'Game Over', // title
'Done' // buttonName
);
}
// Beep three times
function playBeep() {
navigator.notification.beep(3);
}
</script>
</head>
<body>
<p>
<a href="#" onclick="showAlert(); return false;">Show Alert</a></p>
<p>
<a href="#" onclick="playBeep(); return false;">Play Beep</a></p>
</body>
</html>
Output
The output looks like:
![notification6.gif]()
When I click on the show alert link the alert box is opened and when I click on the show beep link then the simulator will give a beep sound 3 times.
notification.vibrate
This method will vibrate the device at the specified period of time. The supported platforms are Android, BlackBerry WebWorks (OS 5.0 and higher), iPhone, Windows Phone 7 (Mango) and Bada 1.2 & 2.x. The syntax is:
navigator.notification.vibrate(milliseconds)time : It shows the Milliseconds to vibrate the device. 1000 milliseconds equals 1 second (Number).
Example:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Cordova WP7</title>
<link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title"
charset="utf-8" />
<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for Cordova to load
document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is ready
function onDeviceReady() {
// Empty
}
// Show a custom alert
function showAlert() {
navigator.notification.alert(
'You are the winner!', // message
'Game Over', // title
'Done' // buttonName
);
}
// Vibrate for 2 seconds
function vibrate() {
navigator.notification.vibrate(2000);
}
</script>
</head>
<body>
<p>
<a href="#" onclick="showAlert(); return false;">Show Alert</a></p>
<p>
<p><a href="#" onclick="vibrate(); return false;">Vibrate</a></p>
</body>
</html>
Output
The output looks like:
![notification7.gif]()
When I click on the vibrate link the simulator vibrates.
Summary : In this article I discussed the notification and the various methods of it.