phonegap-push-notification-example
phonegap-push-notification-example
phonegap-push-notification-example

What is Push Notification ?

Push notifications are simple messages from apps installed on a device that wake up the handset and alert the user with a message displayed on the home or lock screen. Push notifications are widely used on all mobile devices as a way to inform or update the user.

!!! UPDATE !!! : Incase, If you want to use firebase for push notification (cordova-plugin-firebase) with ionic, you can read this article Ionic Firebase Push Notification Tutorial

How to send push Notification using PhoneGap / Apache Cordova ?

  1. Creating a Google Project
  2. Working with Mobile for receiving Push Notification

Creating a new Google Project

  1. Login to https://console.firebase.google.com using your google account
  2. Create New Firebase Project
  3. Navigate to Firebase Project Settings -> Add android 
  4. Fill Required Details

 

Setting up Apache Cordova / PhoneGap Project for Receiving Push Notifications

In this tutorial we’ll see how to setup Apache Cordova / PhoneGap project for receiving push notifications.

  • Open Android SDK Manager (type android in terminal)
  • Make sure you’ve installed the required tools

 

Receiving Push Notification using PhoneGap / Apache Cordova

  1. Create a New Project or use existing project
  2. Add platform such as android
  3. Add you Push Notification Plugin (https://github.com/phonegap/phonegap-plugin-push)
cordova create pushexample
cd pushexample
Update you packagename in config.xml

Move your downloaded google-service.json to root folder

cordova platform add [email protected]
cordova plugin add phonegap-plugin-push

 

Phonegap push notification example code

var push = PushNotification.init({
    android:{}
});

push.on('registration', function (data) {
    // data.registrationId
    console.log(data.registrationId);
});

push.on('notification', function (data) {
    alert("Title:"+data.title+" Message:"+ data.message);
});

push.on('error', function (e) {
    console.log(e.message)
});

During Initiation

when GCM registration is success, you’ll receive GCM registration Token from firebase server. you can check registeration token heredata.registrationId. Where, registrationId is an unique for all device & all application

While receiving Push Notification 

when you send Push Message from server, push.on('notification') will be called. you can receive these data such as message, title, count, sounds, image, additionalData. if some error occurred it’ll initiate push.on('error')

Apache Cordova / Phonegap Push Notification Full Example code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CODESUNDAR.COM</title>
    <script src="cordova.js"></script>
    <script>
        document.addEventListener('deviceready', onDeviceReady, false);
        function onDeviceReady() {
            console.log("device ready");
            var push = PushNotification.init({
                android:{}
            });

            push.on('registration', function (data) {
                // data.registrationId
                console.log(data.registrationId);
            });

            push.on('notification', function (data) {
                alert("Title:"+data.title+" Message:"+ data.message);
            });

            push.on('error', function (e) {
                console.log(e.message)
            });
        }
    </script>
</head>

<body>
    <button onclick="register()">Register My Device</button>
</body>

</html>

Sending Push Notification

  1. Navigate to Firebase Cloud Messaging
  2. Create New Message
  3. Fill Title, Message then click Next
  4. Choose Android Platform & Click Send Now

Not working?

  • Check whether you’ve installed Push Notification Plugin
  • Make sure, you’ve installed required tools in SDK Manager (see the above figure)
  • Check you’ve included cordova.js file with your project
  • Make sure your internet connection & Push notification Permission
Sundaravel M

About the author: Hey! It's me sundar. (Yea, I'm the founder of codesundar.com). I'm a passionate computer programmer who loves modern web and mobile development. feel free to reach me : Facebook - Twitter - Google+