Cordova Push Notification Tutorial

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 !!! : In case, If you want to use firebase for a 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

Login to https://console.firebase.google.com using your google account

Create New Firebase Project

Navigate to Firebase Project Settings -> Add android

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

cordova create pushexample
cd pushexample

Update you package name in config.xml

Move your downloaded google-service.json to root folder

cordova platform add android
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 a success, you’ll receive GCM registration Token from firebase server.you can check registration token here data.registrationId . Where registrationId is unique for all device & all application

While receiving Push Notification

when you send Push Message from a 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