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.
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.
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
Install PushPlugin phonegap plugin into your project.
cd com.revivalx.ionic.push blank cordova plugin add https://github.com/phonegap-build/PushPlugin
Open your config.xml and change it to like this.
<?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="email@example.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>
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.
Then you will be direct to this page. Copy out your project number on the top. Click Enable API.
Enable Google Cloud Messaging for Android. Click Credentials under APIs and auth on left sidebar.
Create new key under Public API access.
Click Server key.
Leave it blank and click Create.
Below is API key details for your project. Copy your 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/