Implement Push Notifications for android and iOS (phonegap) – part 1

In this tutorial I will show you how to implement push notifications in your phonegap app (cordova) for android and iOS platform.

Google Cloud Messaging for Android (GCM) is a service that allows you to send data from your server to your users’ Android-powered device, and also to receive messages from devices on the same connection. The GCM service handles all aspects of queueing of messages and delivery to the target Android application running on the target device. GCM is completely free no matter how big your messaging needs are, and there are no quotas. Reference.

Google Cloud Messaging (GCM)

Google Cloud Messaging (GCM)

Apple Push Notification service (APNs for short) is the centrepiece of the push notifications feature. It is a robust and highly efficient service for propagating information to iOS and OS X devices. Each device establishes an accredited and encrypted IP connection with the service and receives notifications over this persistent connection. If a notification for an application arrives when that application is not running, the device alerts the user that the application has data waiting for it. Reference.

Apple Push Notifications Service (APNS)

Apple Push Notifications Service (APNS)

For this tutorial, we will using ionic framework to create the app. Open your terminal (mac), cmd (windows) . Create an app using this command,

ionic start com.revivalx.ionic.push blank
ionic framework

ionic framework

Install PushPlugin phonegap plugin into your project.

cd com.revivalx.ionic.push blank
cordova plugin add https://github.com/phonegap-build/PushPlugin
PushPlugin phonegap plugin

PushPlugin phonegap plugin

Open your config.xml and change it to like this.

ionic directory

ionic directory

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.revivalx.ionic.push" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>IonicPush</name>
    <description>
        IonicPush.
    </description>
    <author email="mohammadnrdn@gmail.com" href="http://revivalx.com/">
      Mohammad Nurdin bin Norazan
    </author>
    <content src="index.html" />
    <access origin="*" />
    <preference name="webviewbounce" value="false" />
    <preference name="UIWebViewBounce" value="false" />
    <preference name="DisallowOverscroll" value="true" />

    <!-- Don't store local date in an iCloud backup. Turn this to "cloud" to enable storage
         to be sent to iCloud. Note: enabling this could result in Apple rejecting your app.
    -->
    <preference name="BackupWebStorage" value="none" />

    <feature name="StatusBar">
      <param name="ios-package" value="CDVStatusBar" onload="true" />
    </feature>
</widget>

For Android.

Now we need to get project id from google cloud. Go to  https://console.developers.google.com and create a new project. Click Create Project button and a popup will appear. Enter your project name and click Create. Mine is Ionic Push.

google cloud create project

google cloud create project

Then you will be direct to this page. Copy out your project number on the top. Click Enable API.

google cloud developer dashboard

google cloud developer dashboard

Enable Google Cloud Messaging for Android. Click Credentials under APIs and auth on left sidebar.

google developer console API

google developer console API

Create new key under Public API access.

APIs and auth

APIs and auth

Click Server key.

server key

server key

Leave it blank and click Create.

server key

server key

Below is API key details for your project. Copy your API key.

API key

API key

So next tutorial is for iOS part. http://blog.revivalx.com/2014/08/29/implement-push-notifications-for-android-and-ios-phonegap-part-2/

 

 

 

 

3 thoughts on “Implement Push Notifications for android and iOS (phonegap) – part 1

Leave a Reply

Your email address will not be published. Required fields are marked *