Push Notification with Phonegap Part - 1

Hello Friends

For more videos please follow this channels
http://www.youtube.com/WebBoostings
Please get the latest details about programming
http://webboostings.blogspot.in/
visit our website
http://programming-guru.com/

This tutorial will be based on the Phonegap tutorial. You will need a Developer Profile for Apple and Phonegap running on your computer, so I strongly recommend that you do this tutorial first. Configure Phonegap. This tutorial will give you an general overview of the Apple push notification service(APNS), It will also handle the certificate part of the application and set everything up so you can write code in a Part 2 tutorial.

Difference between Local Push Notification and Push Notification

It´s easy to be confused about push notifications and local notifications. The difference is that push notifications comes from a 3rd party server to inform users about something, but local notification only runs on the application itself without any server interaction. You can compare it with a normal javascript alert() scheduled by your application. One way to achieve native push notifications is with phonegaps official PushPlugin.

Apple Push Notification Service Work flow Overview

ASN Token Generation

• The device connects to the APNS server, in this case with Phonegaps PushPlugin will do that.
• The APNS generates a device token that will link your device to the APNS server.
• The token is sent back to the device and it can be retrieved in a callback in your application.
• At this point it´s a good idea to post the token to your server and store it in a database of your choice.

Simple diagram to understand

Creating Certificates and provisioning profiles

Generating Certificate Signing Request(CSR) and exporting a private key

You don’t need to know much about this, but its important to note that a certificate only works in combination with a private key.  The certificate is the public document and the key is your own private key. This is how your certificate and key is treated when you use Secure Socket Layer(SSL).

1. Open Keychain Access on your mac and go to to “Certificate assistant” then to “Request a Certificate from a Certificate Authority.
2. Enter your email address, I usually use my apple id email, but you can use whatever. Enter the app name (PushNotificationApp) in the common field, you can use any name, but a nice descriptive name is preferred so you easily can find your private key later.
3. Check save to disk and continue. Save the file as “YourAppName.certSigningRequest” on your desktop. (PushNotificationApp.certSigningrequest)
4. Go to the Keys section in Keychain Access and locate your new private key with the name you chose. Right click and choose export.
5. Save the private key on your desktop with the name “YourAppName.p12″ and enter a password. (PushNotificationApp.p12)

Creating your new Application ID and SSL certificate

This part will be the same as the Phonegap Configuration tutorial except you will need an extra certificate for handling push notifications.  So I will do a recap for your convenience and myself too.

1. Got to developer.apple.com and log in.
2. Go to the iOS developer center.
3. Go to “Select the Certificates, Identifiers and Profiles” from the right panel
4.  Go to “Certificates” in the “iOS Apps” section.
5. Got to “App IDs” in the sidebar and click the “+” button on top right corner.

Fill in these details:

• App ID Description:  YourAppName (PushNotificationApp)
• App Services: Tick off “Push Notifications” checkbox
• Explicit App ID: no.apt.YourAppName (use your own bundle id) (com.webconnect.webboostings)

You will need to set this bundle id in your Xcode projects later on. Click “Continue” and verify your setup and submit.

Now we will generate a certificate for our server to handle push notifications over SSL to the APNS.

1. Select you newly created Application for the list and you will see a dialog box. Notice the two orange lights on the “Push Notification” row that says configurable. One for “Development” and one for “Distribution”.
2. Click “Settings” and scroll down to “Push Notifications”
3. Select the “Create certificate” button in the “Development SSL Certificate” section.
4. The new dialog box will ask you to generate a Certificate Signing Request(CSR), but we already did that and we have our ”YourAppName.certSigningRequest” saved on our desktop. Just click “Continue”.
5. In the next step you will upload your CSR, upload the YourAppName.certSigningRequest” and wait a few seconds. After its done Click “Continue”
6. Dowload your new certificate, its named  ”aps_development.cer”. Move it to the desktop along with the others.

If you been following step by step you have 3 files on your desktop:

• YourAppName.certSigningRequest (PushNotificationApp.certSigningRequest)
• YourAppName.p12 (PushNotificationApp.p12)
• aps_development.cer

Take good care of them, we are going to visit them soon.

Making Provisioning Profile

The provisioning profile is the file Xcode uses to link your App iD (com.webconnect.webboostings) with developer certificates and  iOS devices. You still have work to do in the iOS developer center.

1. Go to the sidebar and click the “Provisioning Profiles” button and then click the + button in top right corner.
2. Tick off  ”iOS Development” and click “Continue”.
3. Select the App ID  you created in the previous section and click “Continue”.
4. Select the SSL Certificates you want to include in the profile and click “Continue”.
5. Select the devices you want to include in your profile and click “Continue”.
6. Give the profile a descriptive name such as “YourAppName Development” and click “Generate”.
7. Download the profile and double click on it to add it to Xcode. Open Xcode and you will find your generated profile if you go to “Window” and open the “Organizer”.

Generating PEN Files (Most Important)

This the last part of this tutorial if you get this right you will be able to implement awesome push notifications in your application. In the next step we have to generate our certificate and key to .pem files which is more usable format for SSL.

• Open a new terminal window and go to the desktop:
• $ cd ~/Desktop
• Convert the aps_development.cer file into a .pem file:
• $ openssl x509 -in aps_development.cer -inform der -out YourAppNameCer.pem
• Convert the YourAppName.p12 file into a .pem file:
• $ openssl pkcs12 -nocerts -out YourAppNameKey.pem -in YourAppName.p12
• After running the command you will be asked to confirm your password:
• Enter Import Password:
• MAC verified OK
• Enter PEM pass phrase:
• Verifying - Enter PEM pass phrase:
• Now the moment of truth, does this work at all. Lets check if the certificates are OK, but first run following command to check if you don’t have an angry firewall:
• $ telnet gateway.sandbox.push.apple.com 2195
• If you see this response you are all good:
• Trying 17.172.232.226...
• Connected to gateway.sandbox.push-apple.com.akadns.net.
• Escape character is '^]'.

If you cant connect to the APNS server then try one more time, you have to make sure port 2195 is open and try again. If you are good to go the lets try again to check if we can connect using our certificate and private key to set up a SSL connection:

• $ openssl s_client -connect gateway.sandbox.push.apple.com:2195 -cert YourAppNameCer.pem -key YourAppNameKey.pem
• Then enter your key password:
• Enter pass phrase for YourAppNameKey.pem:

If the connection is successful and you get a handshake with the APNS server you are finally done with this tutorial. You can type and press enter to disconnect from the server. If you get an error, I´m truly sorry! You might have to start this tutorial over again.

There are two APNS servers: the “sandbox” server that you use in development mode, and a “live” server you use in production mode. As you might remember we set our provisioning profile to be “iOS Development” so we are using the APNS server for development.

This was the boring part! Next tutorial we are going to make a native iOS application with phonegap using the PushPlugin. Then write a nodejs server to handle our push notifications. Stay tuned for more!

Push Notification with Phonegap Part - 2 

Thank You
Abhishek Bendre