如何使用 ionic 3 和 Firebase Cloud Messaging 从通知栏打开特定页面？

Posted 2023-03-16

【中文标题】如何使用 ionic 3 和 Firebase Cloud Messaging 从通知栏打开特定页面？

【英文标题】：How to open specific page from notification bar using ionic 3 and Firebase Cloud Messaging?

【发布时间】：2017-12-23 01:17:12

【问题描述】：

我已经按照 Ionic 3 文档中关于推送通知的说明进行操作。

当我尝试在后台发送通知和我的应用程序时，我无法触发“通知”事件，因此我无法通过特定页面。

但是当我的应用在前台时，“通知”事件会自动触发。

我用：

Ionic 3 作为移动框架

Firebase 云消息作为消息服务

带有 larave-fcm 插件的 Laravel 发送消息

后端 - 用于将消息推送到 firebase 的 Laravel 代码

    $optionBuilder = new OptionsBuilder();
    $optionBuilder->setTimeToLive(60*20)->setContentAvailable(true);

    $notificationBuilder = new PayloadNotificationBuilder('Hello');
    $notificationBuilder->setBody('Hello world')->setSound('default');

    $dataBuilder = new PayloadDataBuilder();
    $dataBuilder->addData(['custom' => 'test']);

    $option = $optionBuilder->build();
    $notification = $notificationBuilder->build();
    $data = $dataBuilder->build();

    $token = "token";

    $downstreamResponse = FCM::sendTo($token, $option, $notification, $data);

    $success = $downstreamResponse->numberSuccess();
    $failure = $downstreamResponse->numberFailure();
    $modification = $downstreamResponse->numberModification();

    echo 'Success: '.$success;
    echo "<br>";
    echo 'Failure: '. $failure;
    echo "<br>";
    echo 'Modification: '.$modification;
    print_r($downstreamResponse->tokensToDelete());
    echo "<br>";
    print_r($downstreamResponse->tokensToModify());
    echo "<br>";
    print_r($downstreamResponse->tokensToRetry());
    echo "<br>";
    print_r($downstreamResponse->tokensWithError());

FRONTEND - 我在 app.component.ts 上的离子应用构造函数

constructor(private translate: TranslateService, private platform: Platform, settings: Settings, private config: Config, private statusBar: StatusBar, private splashScreen: SplashScreen, public push: Push, public alertCtrl: AlertController, public storage: Storage, private backgroundMode: BackgroundMode) 
this.initTranslate();
this.platform.ready().then(() => 
  if(!this.backgroundMode.isActive) 
    this.backgroundMode.setDefaults(silent: true);
    this.backgroundMode.enable();
   else 
    this.backgroundMode.disable();
    this.backgroundMode.setDefaults(silent: true);
    this.backgroundMode.enable();
        
  this.pushSetup();
  this.storage.get('test').then((val) => 
    if(val == 'news')
      this.nav.setRoot(TabsPage);
    
  );         
);

函数pushSetup()

pushSetup() 
const options: PushOptions = 
  android: 
      senderID: '10524067XXXXX'
  ,
  ios: 
      alert: 'true',
      badge: true,
      sound: 'false'
  ,
  windows: 
;

const pushObject: PushObject = this.push.init(options);

pushObject.on('notification').subscribe((notification: any) => 
  if(notification.additionalData.foreground)
    let myAlert = this.alertCtrl.create(
      title: 'Push',
      message: JSON.stringify(notification)
    );
    myAlert.present();
   else         
    this.storage.set('test', 'news');
  
);
pushObject.on('registration').subscribe((registration: any) => 
   console.log(registration);
);
pushObject.on('error').subscribe(error => console.error('Error with Push plugin', error));

【问题讨论】：

编辑：添加代码

避免将您的 API 令牌放在像 SO.. 这样的开放站点中。

您好，谢谢！我忘了隐藏我的令牌 :)

【参考方案1】：

我找到了答案 here.

我应该像这样发送给 fcm

"data" : 
    "title": "Test Notification",
    "body": "This offer expires at 11:30 or whatever",
    "notId": 10,
    "surveyID": "ewtawgreg-gragrag-rgarhthgbad"

在 laravel fcm 上，只需在 PayloadDataBuilder 的 addData 函数上设置标题、正文、notId。