Hello friends, today we will learn how to implement push notification functionality in PhoneGap project. So please follow each step one by one to add push notification:

1. Plugin Instlation
For push notification in IOS you have to install push plugin and following additional plugins:

    cordova plugin add org.apache.cordova.device
    cordova plugin add org.apache.cordova.dialogs
    cordova plugin add org.apache.cordova.vibration
    cordova plugin add https://github.com/phonegap-build/PushPlugin.git.

2. Copy PushNotification.js from location /plugins/com.phonegap.plugins.PushPlugin/www/ to your /www/ in root folder of project, also add its reference in /www/index.html as:

<script src=PushNotification.js></script>

3. Build the project

cordova build iOS

4. Now next step is to register the device.

• For this you will need Apple account to generate certificates and provisions.
• You need to make a new App ID and provisioning profile for each app that uses push using iOS Provisioning Portal.
• You will also required a server as Push notifications are always sent by a server.

5.Generate CSR:
When you create the CSR, a new private key is made that is put into your keychain. You then send the CSR to a certificate authority (in this case that is the iOS Developer Portal), which will generate the SSL certificate for you based on the information in the CSR.
=> Open Keychain Access on your Mac (it is in Applications/Utilities) and choose the menu option Request a Certificate from a Certificate Authority
=> Add email id(apple email id would be recommended) and common name like PushChat and then press continue.
=> Save the certificate with name something like this, Pushchat. certSigningRequest
=> Now go to keys section in keychain you will find there new push private key, export it and save it as pushkey.p12

6. Making the App ID and SSL certificates
=> Login to developer.apple.com and select Certificates, Identifiers and Profiles
=> Select Certtificates in iOS Apps section.
=> Go to App IDs in the sidebar and click the + button and fill the details
=> Press Continue button and click on Submit, now you have added a new App ID.
=> Now you will find new App ID in list. which when expands shows a orange lights that says your App ID can be used for push after configuring the settings.
=> Click on settings that will forward to a window, select there Create Certificate under Apple Push Notification.
=> Add iOS Certificate wizard will show, click on Continue and upload CSR that you have already created. Now click on Generate which will generate a SSL certificate.
=> After click on Continue download the certificate named as aps_development.cer

7. Making a PEM file
=> Open the terminal and use these commands

• Go to the folder where all certificate are downloaded.

$ cd ~/desktop/files

• Convert the .cer file into a .pem file

$ openssl x509 -in aps_development.cer -inform der -out PushChatCert.pem

• Convert the private keys .p12 file into .pem file

$ openssl pkcs12 -nocerts -out PushChatKey.pem -in PushChatKey.p12
Enter Import Password: 
MAC verified OK
Enter PEM pass phrase: 
Verifying - Enter PEM pass phrase:

Enter the pass phrase to encrypt the PEM file.

• Now, Combine certificate and key into a single pen file

$ cat PushChatCert.pem PushChatKey.pem > ck.pem



8. Making the PEM file
=> In IOS development center go to Provisioning Profile.
=> Select iOS App Development under What type of provisioning profile do you need? and press Continue.
=> Select App ID that you have created previously, Press Continue.
=> Select devices that you want to include for development.
=> Set the provisioning profile name and press generate.

9. Install the new provisioning profile and .pem file into project

10. Now in js file add the following code within device ready



    if('android' === device.platform.toLowerCase()) {
            window.plugins.pushNotification.register(function() { }, function() { }, {
                ecb      : 'onNotificationGCM',
                senderID : 'Project ID'// Google Project ID.
            });
        }
        else {// iOS.
            window.plugins.pushNotification.register(function(result) {
                device_token = result;
                // Successfully registered device.
            }, function(error) {
                //alert('error');
                // Failed to register device.
            }, {
                alert : 'true',
                badge : 'true',
                sound : 'true',
                ecb   : 'onNotificationAPN'
            });
        }


11. Add following code after device ready function



/**
 * Notification from IOS APN
 * @param e
 */
function onNotificationAPN (event) {
    if ( event.alert )
    {
        navigator.notification.alert(event.alert);
    }

    if ( event.sound )
    {
        var snd = new Media(event.sound);
        snd.play();
    }

    if ( event.badge )
    {
        pushNotification.setApplicationIconBadgeNumber(successHandler, errorHandler, event.badge);
    }
}

Now, you have successfully added the Push functionality to your App.


Hope this will help you!!..