Ionic 3 App 未在通知点击时重定向到特定页面答案

【问题标题】：Ionic 3 App is not redirecting to specific page on notification clickIonic 3 App 未在通知点击时重定向到特定页面
【发布时间】：2017-10-09 06:47:04
【问题描述】：

phonegap-plugin-push
离子框架：3.6.0
Ionic 应用脚本：2.1.4
Angular 核心：4.1.3
Angular 编译器 CLI：4.1.3
节点：6.11.1
操作系统平台：Windows 10
导航平台：Win32
用户代理：Mozilla/5.0（Windows NT 10.0；Win64；x64） AppleWebKit/537.36（KHTML，像 Gecko）Chrome/60.0.3112.113 Safari/537.36

当应用程序打开并接收通知时，它可以完美运行，它会自动重定向到特定页面。但是当应用程序关闭并且我点击通知时，它不会重定向到页面。它只会启动应用程序。

在通知代码上推送对象

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();
      }
    });

【问题讨论】：

标签： angular ionic-framework ionic3 phonegap-pushplugin

【解决方案1】：

在我这边，同样的问题出现了，

我通过以下步骤解决了这个问题。

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();
      };
    })
  }

【讨论】：

感谢您的回复。我没有使用 cordova-plugin-fcm ，我使用的是 phonegap-plugin-push。
嗨，github.com/phonegap/phonegap-plugin-push 检查被挖掘的数据是否到来。如果不在服务器端添加这些代码。 "data" => array("title"=> 'Test Push', "message"=> 'Push number 1', "info"=> '超级机密信息', "content-available"=> '1')

【解决方案2】：

在通知订阅之前读取“this”指针的实例：

let self = this

然后将代码中的每个“this”替换为“self”，例如：

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();
  }
});

【讨论】：

【解决方案3】：

如果你使用 FMC 包，它很简单：从服务器端发送通知和数据格式如下：

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

并通过 curl 发送。

在前端安装 FCM 包后，只需在根目录下创建一个名为 sw.js 的文件，并在下面添加代码：

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)
    );
});

希望它会起作用

【讨论】：