带操作按钮的Ionic 4,Firebase-x和FCM Push通知

时间:2020-08-17 14:45:34

标签: push-notification firebase-cloud-messaging ionic4 action-button

我正在尝试使用Firebase-X本机插件将操作按钮添加到通过firebase管理员SDK发送到我的Ionic 4应用程序的推送通知中,以处理推送通知。我的应用程序正在android和ios上运行。

这是我当前的脚本,该脚本成功向我发送了推送通知:

exports.sendDebugPush = functions.pubsub.schedule('* * * * *').onRun((context) => {
    let promises: Promise<any>[] = [];
    return admin.database().ref('/users/******').once("value")
    .then( user => {
        let todos = [];
        for(let key in user.val().nextActions) {
            if(user.val().nextActions[key].active != false) {
                let todo = user.val().nextActions[key]
                todo['todoid'] = key;
                todos.push(todo);
            }
        }
        if(todos.length > 0) {
            //currently we pick a random todo, later on the one with the highest priority
            //todos.sort((a, b) => (a.priority/1 < b.priority/1) ? 1 : -1);
            let randomTodo = todos[Math.floor(Math.random()*todos.length)]      
            let payload: any = {
                notification: {
                    title: "Gossik",
                    body: "Hoiiiii " + new Date().toISOString()
                },
                data: {
                    title: "Gossik",
                    body: "Hoiiiii " + new Date().toISOString(),
                    target: 'todo',
                    todoid: randomTodo.todoid
                }
            };
            Object.values(user.val().devices).forEach( (device) => {
                promises.push(admin.messaging().sendToDevice(String(device), payload));
            });
        }
        return Promise.all(promises)
        .then( () => {
            console.log('success!');
        })
        .catch( error => {
            console.log('failed :(');
            console.log(error);
        });
    });
});

当然,没有操作按钮。并且此函数处理我应用程序中的推送通知(this.firebase =从“ import {FirebaseX}从“ @ ionic-native / firebase-x / ngx”;'中导入的FirebaseX插件”):

initPushNotifications() {
        this.firebase.getToken().then(token => {
            this.db.saveDeviceToken(this.auth.userid, token);
        });
        this.firebase.onMessageReceived().subscribe(data => {
            if(!data.target) {
                let title = '';
                if(data.title) {
                    title = data.title;
                } else if(data.notification && data.notification.title) {
                    title = data.notification.title;
                } else if(data.aps && data.aps.alert && data.aps.alert.title) {
                    title = data.aps.alert.title;
                }
                let body = '';
                if(data.body){
                    body = data.body;
                } else if(data.notification && data.notification.body){
                    body = data.notification.body;
                } else if(data.aps && data.aps.alert && data.aps.alert.body){
                    body = data.aps.alert.body;
                }
                this.alertCtrl.create({
                    message: title + ' ' + body,
                    buttons: [
                                {
                                    text: "Ok"
                                }
                            ]
                }).then( alert => {
                    alert.present();
                });
            } else {
                this.goToToDoPage(data.todoid);
            }
        });
    }

它也成功完成了此操作。我实现了对推送通知的单击处理,以便将其重定向到此类推送通知的待办事项页面(一个具有“ target”属性的对象)。但是现在我想在推送通知中添加两个操作按钮“开始”和“跳过”,以开始或跳过相应的待办事项。明确地说,我说的是后台推送通知,因此该应用程序未打开。然后,用户会在手机上收到标准的推送通知,我希望有两个操作按钮可以在不打开应用程序本身的情况下执行操作。

我尝试使用有效载荷进行各种操作,首先甚至向我展示了操作按钮,但没有实现。例如,以下内容对我不起作用:

let payload: any = {
                notification: {
                    title: "Gossik",
                    body: "Hoiiiii " + new Date().toISOString()
                },
                data: {
                    title: "Gossik",
                    body: "Hoiiiii " + new Date().toISOString(),
                    target: 'todo',
                    todoid: randomTodo.todoid,
                    "actions": [
                        { "icon": "approve_icon", "title": "APPROVE", "callback": "AppComponent.approve", "foreground": true},
                        { "icon": "reject_icon", "title": "REJECT", "callback": "AppComponent.reject", "foreground": true}
                    ]
                }
            };

非常感谢您的帮助,如果还有什么不清楚的地方,请通知我。 :)

0 个答案:

没有答案