Ionic 2：点击推送通知

Posted 2023-02-16

【中文标题】Ionic 2：点击推送通知

【英文标题】：Ionic 2: push notification on click

【发布时间】：2017-10-11 10:39:18

【问题描述】：

会出现一条通知，但单击它们后，它们只会再次打开应用程序。我想要的是单击通知后，它会打开一个特定项目。

在 Laravel 中，我使用 Firebase 云消息 (FCM) 的 brozot/Laravel-FCM 包发送通知，另一方面，我使用 Ionic push notifications 在通知托盘中接收和显示通知。

如果我不在 Laravel 上使用 setClickAction()，Ionic 应用程序会在单击通知时打开，但如果我设置 setClickAction()，则不会发生任何事情。通知只是消失了。

Laravel 代码：

$notificationBuilder = new PayloadNotificationBuilder('my title');
$notificationBuilder->setBody('Hello world')
                    ->setSound('default')
                    ->setClickAction('window.doSomething');
$notification = $notificationBuilder->build();

Ionic 2 框架示例：

import  Component, ViewChild  from '@angular/core';
import  Platform, Nav, MenuController, ModalController, Events, AlertController  from 'ionic-angular';
import  StatusBar  from '@ionic-native/status-bar';
import  SplashScreen  from '@ionic-native/splash-screen';
import  Push, PushObject, PushOptions  from '@ionic-native/push';
import  Storage  from '@ionic/storage';

import 
    SearchPage
 from '../pages/pages';

@Component(
    templateUrl: 'app.html'
)
export class MyApp 
    @ViewChild(Nav) nav: Nav;

    rootPage: any = SearchPage;

    constructor(
        platform: Platform,
        statusBar: StatusBar,
        splashScreen: SplashScreen,
        private menu: MenuController,
        private modalCtrl: ModalController,
        private events: Events,
        private push: Push,
        private alertCtrl: AlertController,
        private storage: Storage
    ) 

        platform.ready().then(() => 
            // Okay, so the platform is ready and our plugins are available.
            // Here you can do any higher level native things you might need.
            statusBar.styleDefault();
            splashScreen.hide();
        );
        this.pushSetup();
    

    pushSetup() 
        const options: PushOptions = 
            android: 
                senderID: 'xxxxxxxxxxx',
                forceShow: true
            ,
            ios: 
                senderID: 'xxxxxxxxxxx',
                alert: 'true',
                badge: true,
                sound: 'true'
            ,
            windows: ,
            browser: 
                pushServiceURL: 'http://push.api.phonegap.com/v1/push'
            
        ;

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

        pushObject.on('notification').subscribe((notification: any) => 

        );

        pushObject.on('registration').subscribe((registration: any) => 
            alert(registration.id);
        );

        pushObject.on('error').subscribe(error => alert('Error with Push plugin' + error));

    



(<any>window).doSomething = function () 
    alert('doSomething called'); 

我错过了什么？

【问题讨论】：

我在 Ionic 中使用 One-Signal 和 firebase 实现了相同的功能（两者都是免费的）。如果您愿意更改插件，将提供它作为答案

是的，我愿意

请检查我的解决方案

您应该在 pushObject.on('notification') 中捕获您的通知，在那里您可以导航到指定页面。

【参考方案1】：

要实现通用的单信号推送通知，需要完成这些步骤

创建OneSignal 帐户

在 One Signal 中添加一个新 APP，首先针对 Android 进行配置（您可以针对任何平台，但我目前专注于 Android）。您需要获取 Google Server Key 和 Google Project Id .

您可以使用 this Steps 从 Firebase 获取上述密钥

现在我们完成了 OneSignal 帐户的配置，现在使用 cordova plugin 与 ionic 集成

在 Ionic2 中：

 OneSignal.startInit(//google Server Key, //Google ProjectId);
            OneSignal.inFocusDisplaying(OneSignal.OSInFocusDisplayOption.Notification);
            OneSignal.setSubscription(true);
            OneSignal.handleNotificationReceived().subscribe(() => 
                // handle received here how you wish.


                // this.goToReleatedPage(data.Key, data.Value);
            );
            OneSignal.handleNotificationOpened().subscribe((data: any) => 
                //console.log('MyData'+ JSON.stringify(data.additionalData));
                this.parseObject(data);
            );

            OneSignal.endInit();

Ionic 中的解析对象

public parseObject(obj) 
        for (var key in obj) 
            this.goToReleatedPage(key, obj[key]);
            if (obj[key] instanceof Object) 
                this.parseObject(obj[key]);
            
        
    

goToReleatedPage 方法

public goToReleatedPage(Key, Value) 
        //console.log("Pagename"+" " + Key + "ID" +" " + Value);
        if (Key === 'xxxx') 
            this.navCtrl.push(xxxPage, 
                id: Value
            );
         else if (Key === 'Foo') 
            this.navCtrl.push(foosPage, 
                id: Value,

            );
         else if (Key === 'bar') 
            this.navCtrl.push(barPage, 
                id: Value
            );
        

    

在从OneSignal 发送消息时，您需要指定您需要打开哪个page，并且您要传递Id，如下所示