app在前台时的离子推送通知

时间:2017-09-27 22:54:34

标签: ionic-framework push-notification cordova-plugin-fcm

我正在制作一个离子3应用程序。即使应用程序位于前台,我也希望显示通知。我尝试过使用FCM插件我只在app处于后台时收到通知。

Home.ts

import { AngularFireDatabase } from 'angularfire2/database';
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import firebase from 'firebase';

declare var FCMPlugin;

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  firestore = firebase.database().ref('/pushtokens');
  firemsg = firebase.database().ref('/messages');
  constructor(public navCtrl: NavController,public afd:AngularFireDatabase) {
    this.tokensetup().then((token)=>{
      this.storeToken(token);
    })

  }
  ionViewDidLoad() {
    FCMPlugin.onNotification(function (data) {
      if (data.wasTapped) {
        //Notification was received on device tray and tapped by the user.
        alert(JSON.stringify(data));
      } else {
        //Notification was received in foreground. Maybe the user needs to be notified.
        alert(JSON.stringify(data));
      }
    });
    FCMPlugin.onTokenRefresh(function (token) {
      alert(token);
    });

  }

  tokensetup(){
    var promise = new Promise((resolve,reject)=>{
      FCMPlugin.getToken(function(token){
         resolve(token);
        },(err)=>{
          reject(err);
        });
    })
    return promise;
  }
  storeToken(token){
    this.afd.list(this.firestore).push({
       uid: firebase.auth().currentUser.uid,
       devtoken: token
    }).then(()=>{
      alert('Token stored')
    }).catch(()=>{
      alert('Token not stored');
    })
    // this.afd.list(this.firemsg).push({
    //   sendername:'adirzoari',
    //   message: 'hello for checking'
    // }).then(()=>{
    //   alert('Message stored');
    // }).catch(()=>{
    //   alert('message not stored');
    // })
  }
}

通知功能云

  var functions = require('firebase-functions');
var admin = require('firebase-admin');

admin.initializeApp(functions.config().firebase);
var wrotedata;
exports.Pushtrigger = functions.database.ref('/messages/{messageId}').onWrite((event) => {
    wrotedata = event.data.val();

    admin.database().ref('/pushtokens').orderByChild('uid').once('value').then((alltokens) => {
        var rawtokens = alltokens.val();
        var tokens = [];
        processtokens(rawtokens).then((processedtokens) => {

            for (var token of processedtokens) {
                tokens.push(token.devtoken);
            }

        var payload = {

                "notification":{
                    "title":"From" + wrotedata.sendername,
                    "body":"Msg" + wrotedata.message,
                    "sound":"default",
                    },
                "data":{
                    "sendername":wrotedata.sendername,
                    "message":wrotedata.message
                }
        }

            return admin.messaging().sendToDevice(tokens, payload).then((response) => {
                console.log('Pushed notifications');
            }).catch((err) => {
                console.log(err);
            })


        })    
    })
})

function processtokens(rawtokens) {
    var promise = new Promise((resolve, reject) => {
         var processedtokens = []
    for (var token in rawtokens) {
        processedtokens.push(rawtokens[token]);
    }
    resolve(processedtokens);
    })
    return promise;    

}

仅当应用程序在后台时才有效。但是当我从应用程序退出并且它不在后台时我没有得到任何通知。

2 个答案:

答案 0 :(得分:0)

您需要编辑FCM插件文件。我现在仅找到适用于android的解决方案。

我将https://github.com/fechanique/cordova-plugin-fcm这个FCM插件用于cordova中的android和ios。

您需要编辑MyFirebaseMessagingService.java文件的第53行(行号可能有所不同)。

此文件中有一个方法onMessageReceived,该方法的末尾有一行被注释,该行调用另一个方法,即sendNotification(....)

sendNotification(remoteMessage.getNotification().getTitle(), remoteMessage.getNotification().getBody(), data);

您必须取消注释此行并更改remoteMessage.getData() to data中的最后一个参数(代码中已经存在数据变量)。

并对这一行FCMPlugin.sendPushPayload( data );

进行评论

现在你很好。现在,即使打开(前景)应用程序,您也可以接收通知,您将收到横幅(浮动)通知。

如果您为IOS找到了任何东西,请告诉我!!!

答案 1 :(得分:0)

我正在为Ionic 3使用Firebase插件。 会检查通知数据是否包含“ notification_foreground”,并将其保存在变量foregroundNotification中。

  if(data.containsKey("notification_foreground")){
            foregroundNotification = true;
        }

然后创建 showNotification 变量,该变量决定是否需要显示通知,并将其传递给sendMessage(显示通知功能)。

  if (!TextUtils.isEmpty(body) || !TextUtils.isEmpty(title) || (data != null && !data.isEmpty())) {
        boolean showNotification = (FirebasePlugin.inBackground() || !FirebasePlugin.hasNotificationsCallback() || foregroundNotification) && (!TextUtils.isEmpty(body) || !TextUtils.isEmpty(title));
        sendMessage(data, messageType, id, title, body, showNotification, sound, vibrate, light, color, icon, channelId, priority, visibility);
    }

您的有效负载应包含notification_foreground,notification_title和notification_body。