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)
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)
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
PushPlugin phonegap plugin
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">
<author email="email@example.com" href="http://revivalx.com/">
Mohammad Nurdin bin Norazan
<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" />
<param name="ios-package" value="CDVStatusBar" onload="true" />
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
Then you will be direct to this page. Copy out your project number on the top. Click Enable API.
google cloud developer dashboard
Enable Google Cloud Messaging for Android. Click Credentials under APIs and auth on left sidebar.
google developer console API
Create new key under Public API access.
APIs and auth
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/