Notification in PhoneGap

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.

Up Next
    Ebook Download
    View all
    Learn
    View all