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?

Creating a Google Project
Working with Mobile for receiving Push Notification

Creating a new Google Project

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

Create a New Project or use an existing project
Add platform such as android
Add your Push Notification Plugin (http://github.com/phonegap/phonegap-plugin-push)

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

    <span class="hljs-keyword">var</span> push = PushNotification.init({
        <span class="hljs-attr">android</span>: {}
    });

    push.on(<span class="hljs-string">'registration'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">data</span>) </span>{
        <span class="hljs-comment">// data.registrationId</span>
        <span class="hljs-built_in">console</span>.log(data.registrationId);
    });

    push.on(<span class="hljs-string">'notification'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">data</span>) </span>{
        alert(<span class="hljs-string">"Title:"</span> + data.title + <span class="hljs-string">" Message:"</span> + data.message);
    });

    push.on(<span class="hljs-string">'error'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>) </span>{
        <span class="hljs-built_in">console</span>.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

<span class="hljs-meta"><!DOCTYPE html></span>
<span class="hljs-tag"><<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span>></span>

<span class="hljs-tag"><<span class="hljs-name">head</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"viewport"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"width=device-width, initial-scale=1.0"</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">"X-UA-Compatible"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"ie=edge"</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">title</span>></span>CODESUNDAR.COM<span class="hljs-tag"></<span class="hljs-name">title</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"cordova.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="javascript">
        <span class="hljs-built_in">document</span>.addEventListener(<span class="hljs-string">'deviceready'</span>, onDeviceReady, <span class="hljs-literal">false</span>);

        <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">onDeviceReady</span>() </span>{
            <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"device ready"</span>);
            <span class="hljs-keyword">var</span> push = PushNotification.init({
                <span class="hljs-attr">android</span>: {}
            });

            push.on(<span class="hljs-string">'registration'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">data</span>) </span>{
                <span class="hljs-comment">// data.registrationId</span>
                <span class="hljs-built_in">console</span>.log(data.registrationId);
            });

            push.on(<span class="hljs-string">'notification'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">data</span>) </span>{
                alert(<span class="hljs-string">"Title:"</span> + data.title + <span class="hljs-string">" Message:"</span> + data.message);
            });

            push.on(<span class="hljs-string">'error'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>) </span>{
                <span class="hljs-built_in">console</span>.log(e.message)
            });
        }
    </span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"></<span class="hljs-name">head</span>></span>

<span class="hljs-tag"><<span class="hljs-name">body</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"register()"</span>></span>Register My Device<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"></<span class="hljs-name">body</span>></span>

<span class="hljs-tag"></<span class="hljs-name">html</span>></span>

Sending Push Notification

Navigate to Firebase Cloud Messaging
Create New Message
Fill Title, Message then click Next
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