Ionic 3 App is not redirecting to specific page on notification click

Question

• phonegap-plugin-push
• Ionic Framework: 3.6.0
• Ionic App Scripts: 2.1.4
• Angular Core: 4.1.3
• Angular Compiler CLI: 4.1.3
• Node: 6.11.1
• OS Platform: Windows 10
• Navigator Platform: Win32

• User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.113 Safari/537.36

  It works perfectly when the app is open & receives notifications,It automatically redirect to specific page.But when the app is closed & I click notifications, It does not redirect to page.It only starts the app.

pushObject on Notification code

pushObject.on('notification').subscribe((notification: any) => {
      console.log('Received a notification', notification);
      if(notification.additionalData.type=="news"){
        this.NewsAndEventsDetails(notification.additionalData.type_id);
      }else if(notification.additionalData.type=="notice"){
        this.getNoticesSingle(notification.additionalData.type_id);
      }else if(notification.additionalData.type=="bill"){
        this.getBillsSingle(notification.additionalData.type_id);
      }else{
        let prompt = this.alertCtrl.create({
          title: notification.title,
          message: notification.message
        });
        prompt.present();
      }
    });

Answer 1

From My side, the same problem occurs,

I resolved this issues doing the following step.

Install FCM plugin

ionic cordova plugin add cordova-plugin-fcm

npm install --save @ionic-native/fcm

Get google-services.json file GoogleService-Info.plist file from fcm for your registered project.

Add google-services.json in android platform root like /platforms/android/google-services.json


Add GoogleService-Info.plist file in ios platform like /patforms/ios/ProjectName/Resoures/Resoures/GoogleService-Info.plist
or also add at /platforms/android/GoogleService-Info.plist

Now run the project on android and ios device you get fcmid.
Store fcmid to the server.

Server side code is like this.


public function sendNotification($sectionName){
        $url = 'https://fcm.googleapis.com/fcm/send';
        $fields = array (
                'to' => "fcmId",
                'notification' => array (
                        "body" => "Hello test",
                        "title" => "Title",
                        "icon" => "myicon",
                        "sound" => "default",
                        "click_action" => "FCM_PLUGIN_ACTIVITY", // this is important for ontapped 
                ),
                'data' => array('rollno' => "test",
                              'name' => "manish",
                              'activitySection' => $sectionName),
                              'priority' => 'high',
        );
        $fields = json_encode ( $fields );
        echo $fields;
            $headers = array (
                    'Authorization: key=' . "fcm server key",
                    'Content-Type: application/json'
            );

        $ch = curl_init ();
        curl_setopt ( $ch, CURLOPT_URL, $url );
        curl_setopt ( $ch, CURLOPT_POST, true );
        curl_setopt ( $ch, CURLOPT_HTTPHEADER, $headers );
        curl_setopt ( $ch, CURLOPT_RETURNTRANSFER, true );
        curl_setopt ( $ch, CURLOPT_POSTFIELDS, $fields );

        $result = curl_exec ( $ch );
        curl_close ( $ch );
   }

This is on app


fcmInitilization() {
    if (!this.plt.is('cordova')) {
      console.warn('Push notifications not initialized. Cordova is not available - Run in physical device');
      return;
    }
    this.fcm.onNotification().subscribe(data => {
      if (data.wasTapped) {
        // do onTapped work here means app in background
      } else {
        let confirmAlert = this.alertCtrl.create({
          title: 'New Notification',
          message: data.title,
          buttons: [{
            text: 'Ignore',
            role: 'cancel'
          }, {
            text: 'View',
            handler: () => {
              //TODO: Your logic here
            }
          }]
        });
        confirmAlert.present();
      };
    })
  }

Answer 2

Just read instance of 'this' pointer before notification subscribe:

let self = this

Then replace each 'this' in your code with 'self' like:

pushObject.on('notification').subscribe((notification: any) => {
  console.log('Received a notification', notification);
  if(notification.additionalData.type=="news"){
    self.NewsAndEventsDetails(notification.additionalData.type_id);
  }else if(notification.additionalData.type=="notice"){
    self.getNoticesSingle(notification.additionalData.type_id);
  }else if(notification.additionalData.type=="bill"){
    self.getBillsSingle(notification.additionalData.type_id);
  }else{
    let prompt = this.alertCtrl.create({
      title: notification.title,
      message: notification.message
    });
    prompt.present();
  }
});

Answer 3

If you use FMC package it simple: from server side you send notification and the data format like this:

$fields = array();
$fields['notification'] = array(
    'title' => $title,
    'body' => $message,
    'icon' => $icon,
    'click_action' => $action
);
$fields['to'] = $subscription_ids;
$fields_data = json_encode($fields);

and send through curl.

In front end side after install FCM package just create a file with name of sw.js in root directory and past code below:

self.addEventListener('notificationclick', function(event) {
    var url = './index.html';
    event.notification.close(); //Close the notification

    // Open the app and navigate to latest.html after clicking the notification
    event.waitUntil(
        clients.openWindow(url)
    );
});

hope it will work