带有 FCM 的 Ionic 2 推送通知

Posted 2023-02-24

【中文标题】带有 FCM 的 Ionic 2 推送通知

【英文标题】：Ionic 2 Push Notifications with FCM

【发布时间】：2018-02-05 02:57:22

【问题描述】：

我正在使用 Ionic Native FCM 在我的 android Ionic 2 应用程序上实现推送通知

当我在前台收到通知时，它可以工作，但是当我在后台收到通知并且单击它时，什么也没有发生。

app.component.ts

firebaseInit()
  //Firebase
  this.fcm.subscribeToTopic('all');

  this.fcm.getToken()
    .then(token => 
      console.log(token);
      this.nativeStorage.setItem('fcm-token', token);
  );

  this.fcm.onNotification().subscribe(
    data => 
      console.log("NOTIF DATA: " + JSON.stringify(data));
      if(data.wasTapped)
        this.nav.push(MemoViewPage, memo: _id: data.memo_id)
        console.info('Received in bg')
      else
        let alert = this.alertCtrl.create(
          title: data.subject,
          message: "New memorandum",
          buttons: [
            
              text: 'Ignore',
              role: 'cancel'
            ,
            
              text: 'View',
              handler: () => 
                this.nav.push(MemoViewPage, memo: _id: data.memo_id)
              
            
          ]
        );

        alert.present();
        console.info('Received in fg')
      
  );

  this.fcm.onTokenRefresh()
    .subscribe(token => 
      console.log(token);
  )

单击系统托盘中的通知后，if(data.wasTapped) 条件不会消失。

编辑

应用程序打开但仅在主页中而不是我设置的指定页面this.nav.push(MemoViewPage, memo: _id: data.memo_id)

当应用程序被终止或未运行时，我也无法收到通知。

【问题讨论】：

您应该使用NavController 让应用程序打开特定页面。

你也可以使用本地推送通知而不是 FCM，这在我的经验中要好得多

@KevinRED NavController 在 app.component.ts 中不起作用，它说没有提供程序，并且在 app.module.ts 下插入 NavController 时出现错误

还有这个github.com/fechanique/cordova-plugin-fcm/issues/269

我相信你可以在脚本的服务器端做一些事情，你可以查看这个链接了解更多信息github.com/phonegap/phonegap-plugin-push/blob/master/docs/…

【参考方案1】：

您可以使用push 插件代替FCM。

this.push.createChannel(
 id: "testchannel1",
 description: "My first test channel",
 importance: 3
).then(() => console.log('Channel created'));

然后您可以使用 pushObjects 来指定通知的需求，例如声音、离子等。

const options: PushOptions = 
   android: ,
   ios: 
       alert: 'true',
       badge: true,
       sound: 'false'
   ,
   windows: ,
   browser: 
       pushServiceURL: 'http://push.api.phonegap.com/v1/push'
   
;

之后，无论您是否使用该应用程序，您都可以轻松收到通知

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

pushObject.on('registration').subscribe((registration: any) => this.nativeStorage.setItem('fcm-token', token));

pushObject.on('notification').subscribe((notification: any) => console.log('Received a notification', notification));

您可以在应用程序的pushObject init 中使用forceShow:true 选项来显示您是否正在使用该应用程序的通知。

一旦您单击通知，应用就会收到通知有效负载，并将应用主页设置为默认值。

【讨论】：

我很难使用代码的pushObject.on('notification') 部分，因为每当我收到通知时都没有收到任何日志

pushObject.on('notification').subscribe( (data: any) => console.log('Message: ' + JSON.stringify(data)) if(data.additionalData.foreground) console.log('Received in fg') else console.log('Received in bg'); )

我通过仔细检查documentation 设法解决了这个问题。因为我正在使用华硕手机测试应用程序，我只需要允许应用程序在后台运行。我不必使用 phonegap-push-plugin

嘿，太好了，因为一切正常。很高兴为您提供帮助