Cordova Push Notification (Phonegap plugin push) Tutorial

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 !!! : 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 android@7.1.0 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 here data.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