Technology

Push notifications are very useful in the mobile applications and it is fast and efficient way to communicate directly with customers.

Push notifications are used to send real time updates,share important news and exciting offers to customers, To achieve the Cordova v5 Push notifications for iOS and Android, We used Firebase API which is provided by google.

There are different process of Push notifications for iOS and Android, we discuss it one by one.

The plugin used for Push Notifications for iOS and Android is “phonegap-plugin-push” and you have to run command in command prompt by cordova plugin add phonegap-plugin-push

Push Notifications for Android

To Recieve push notifications in Android, we need device Id or token of Android device and API_Server_Key

Here is the below code to get the device token or Id.

var devicetoken; 
document.addEventListener('DOMContentLoaded', function () {
   
    main();
    
    document.addEventListener('init', function(event) {
  
          var push = PushNotification.init({
            "android": {
                "senderID": "810340046523",
                 sound: "true",
                vibrate: "true",
                forceShow: "true"
            },
           
        push.on('registration', function(data) {
        
        devicetoken= data.registrationId;

        
  });
  push.on('error', function(e) {
    // e.message
});

By using above code we can get the device token or id from android device and Above senderID is mentioned in google.json file which is downloaded from Firebase.

To get the API_Server_Key, We need to Register the Android application into firebase by using app’s package name and after registering the app into the firebase we can get the API_server_key and legacy server_key from firebase.

By using this API_server_key, we need to put this into PHP code for cordova-Android Push notification which is as follows.

$path_to_firebase_cm = 'https://fcm.googleapis.com/fcm/send';   
 $fields = array(
        'registration_ids' => array($user_device_key),
        'priority' => 10,
        'notification' => array('title' => $_POST['notification_title'], 'body' =>$_POST['notification_text'] ,'sound'=>'Default','image'=>'Notification Image' ),
    );
    $headers = array(
        'Authorization:key=' .'API_server_key',
        'Content-Type:application/json'
    );  

    // Open connection  
    $ch = curl_init(); 
    // Set the url, number of POST vars, POST data
    curl_setopt($ch, CURLOPT_URL, $path_to_firebase_cm); 
    curl_setopt($ch, CURLOPT_POST, true);
    curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
    curl_setopt($ch, CURLOPT_IPRESOLVE, CURL_IPRESOLVE_V4 );
    curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($fields));
    // Execute post   
   $result = curl_exec($ch );
curl_close( $ch );
 //echo $result;
 $this->Flash->success(__('Notification sent to Android.'));
                  return $this->redirect(['action' => 'index']);

After Putting the above php code and entering the API_server_key, You are able to send the push notification for android by using Cordova v5.

Push Notifications for iOS

To receive the push notification in ios by using cordova v5, we need to register the iOS app into the firebase console by putting the Bundle Id of iOS app and after that we can download the googleinfo.plist file which can be placed in root folder of app.

We also need the Authentication key in iOS which is not needed in Android, To get the Authentication key and Team_id, We need to follow some steps which are as follows.

1.In Apple developer account,go to Certificates, Identifiers & Profiles, and under Keys, select All.

2. Click the Add button (+) in the upper-right corner.

3. Enter a description for the APNs Auth Key

4. Under Key Services, select the APNs checkbox, and click Continue.

5. Click Confirm and then Download. Save your key in a secure place. This is a one-time download, and the key cannot be retrieved later.

After getting the APN_Authentication_key, We need to put it into iOS application in firebase console under APNs Authentication Key.

We also need to create Provisioning profile and upload it into firebase console, To create this we need to follow some steps which are as follows.

1. Navigate to the Apple Developer Member Center and sign in.
2. Navigate to Certificates, Identifiers and Profiles.
3.  the drop down menu on the top left corner, select iOS, tvOS, watchOS if it’s not already selected, then navigate to Provisioning Profiles > All.
4. Click the + button to create a new Provisioning Profile.
5. Select iOS App Development as provisioning profile type, then click Continue.
6. In the drop down menu, select the App ID you want to use, then click Continue.
7. Select the iOS Development certificate of the App ID you have chosen in the previous step, then click Continue.
8. Select the iOS devices that you want to include in the Provisioning Profile, then click Continue. Make sure to select all the devices you want to use for your testing.
9. Input a name for this provisioning profile (e.g. Firebase Sample App Development Profile), then click Generate.
10. Click Download to save the Provisioning Profile to your Mac.
11. Double-click the Provisioning Profile file to install it

By following above steps we can get the Provisioning  profile, we need to upload this profile into fireabase console and we also need to enable the Apple Push notification service in the Xcode.

After Following above all steps now we need to get the device token of iOS device, we can get it by using following code.

var devicetoken;
document.addEventListener('init', function(event) {
  
          var push = PushNotification.init({
           
            "ios": {"alert": "true", "badge": "true", "sound": "true"}, 
            "windows": {} 
        });
        push.on('registration', function(data) {
        
        devicetoken= data.registrationId;
      
        
  });
  push.on('error', function(e) {
    // e.message
});

Since we already registered our iOS app into firebase console, So we can easily get API_server_key in the Project settings and we use this ApI_server_key into the below PHP code.

define( 'API_ACCESS_KEY', 'Your API_server_key' );
$registrationIds = array($user_device_key );
// prep the bundle
$msg = array(
        'body'  => $_POST['notification_text'],
        'title'     => $_POST['notification_title'],
        'vibrate'   => 1,
        'sound'     => 'Default',
    );
$fields = array(
            'registration_ids'  => $registrationIds,
            'notification'      => $msg
        );

$headers = array(
            'Authorization: key=' . API_ACCESS_KEY,
            'Content-Type: application/json'
        );

$ch = curl_init();
curl_setopt( $ch,CURLOPT_URL, 'https://fcm.googleapis.com/fcm/send' );
curl_setopt( $ch,CURLOPT_POST, true );
curl_setopt( $ch,CURLOPT_HTTPHEADER, $headers );
curl_setopt( $ch,CURLOPT_RETURNTRANSFER, true );
curl_setopt( $ch,CURLOPT_SSL_VERIFYPEER, false );
curl_setopt( $ch,CURLOPT_POSTFIELDS, json_encode( $fields ) );
$result = curl_exec($ch );
curl_close( $ch );
//echo $result;
$this->Flash->success(__('Notification sent to iOS.'));
                 return $this->redirect(['action' => 'index']);
}

After Putting the API_server_key into the above code,Now we are able to send push notifications into iOS App.

So By following above steps for Android and iOS we are able to send the Push notifications by using Cordova V5.

Reference Links:

https://firebase.google.com/docs/cloud-messaging/ios/client

https://console.firebase.google.com/

https://firebase.google.com/docs/android/setup