Notification in PhoneGap

Richa Garg
12y
12.9k
0
0

Article

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>

<title>Cordova WP7</title>

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:

When I click on the Show alert link then the alert box opens, like:

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>

<title>Cordova WP7</title>

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:

When I click on the show confirm link the screen will look like, with the confirm box:

When I click on the first (the Yes) button, the screen will look like:

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>

<title>Cordova WP7</title>

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>

</body>

</html>

Output

The output looks like:

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>

<title>Cordova WP7</title>

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:

When I click on the vibrate link the simulator vibrates.

Summary : In this article I discussed the notification and the various methods of it.

Up Next

Ebook Download

View all

Step into Windows Phone 8

Read by 1.5k people

Download Now!

Learn

View all