how to send push notification with angularJS and c

Question

I am totally new to push notification in Ionic App. Now i am able to receive notification when someone send notification. I want able to push notification when user conduct some action. Is there any way to send notification from TypeScript using Cordova FCM?

FCM listener

constructor(private fcm: FCM){
      fcm.subscribeToTopic('all');


  fcm.onNotification().subscribe(data=>{
    if(data.wasTapped){
      console.log("Received in background");
    } else {
      console.log("Received in foreground");
    };
  })
}

Answer 1

Hi create Firebase account,

Get Sender ID

https://ionicframework.com/docs/native/push/ [install plugin from here]

Best tutorial to implement push for ionic2

https://medium.com/@ankushaggarwal/push-notifications-in-ionic-2-658461108c59

            Setting up Ionic 2 App to generate device token
            For Android, follow FCM setup instructions. It will give you SERVER_KEY and SENDER_ID. SERVER_KEY is used by server to send push notification and SENDER_ID is used by device to generate device token. For iOS, nothing required to generate device token.


            Replace YOUR_SENDER_ID in config.xml with above SENDER_ID


            <plugin name="phonegap-plugin-push" spec="1.8.2">    
            <variable name="SENDER_ID" value="YOUR_SENDER_ID"/>   
            </plugin>

            Add device token generation code in your main app constructor like below and replace YOUR_SENDER_ID in Push.init() method with above SENDER_ID


            import {Component, ViewChild} from "@angular/core";
            import {AlertController, Nav, Platform} 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 {TabsPage} from "../pages/tabs/tabs";
            import {DetailsPage} from "../pages/details/details";

            @Component({
            template: '<ion-nav [root]="rootPage"></ion-nav>'
            })
            export class Ionic2PushApp {
            @ViewChild(Nav) nav: Nav;
            rootPage: any;

            constructor(public platform: Platform,
                        public statusBar: StatusBar,
                        public splashScreen: SplashScreen,
                        public push: Push,
                        public alertCtrl: AlertController) {
                this.rootPage = TabsPage;
                platform.ready().then(() => {
                this.statusBar.styleDefault();
                this.splashScreen.hide();
                this.initPushNotification();
                });
            }

            initPushNotification() {
                if (!this.platform.is('cordova')) {
                console.warn("Push notifications not initialized. Cordova is not available - Run in physical device");
                return;
                }
                const options: PushOptions = {
                android: {
                    senderID: "YOUR_SENDER_ID"
                },
                ios: {
                    alert: "true",
                    badge: false,
                    sound: "true"
                },
                windows: {}
                };
                const pushObject: PushObject = this.push.init(options);

                pushObject.on('registration').subscribe((data: any) => {
                console.log("device token ->", data.registrationId);
                //TODO - send device token to server
                });

                pushObject.on('notification').subscribe((data: any) => {
                console.log('message', data.message);
                //if user using app and push notification comes
                if (data.additionalData.foreground) {
                    // if application open, show popup
                    let confirmAlert = this.alertCtrl.create({
                    title: 'New Notification',
                    message: data.message,
                    buttons: [{
                        text: 'Ignore',
                        role: 'cancel'
                    }, {
                        text: 'View',
                        handler: () => {
                        //TODO: Your logic here
                        this.nav.push(DetailsPage, {message: data.message});
                        }
                    }]
                    });
                    confirmAlert.present();
                } else {
                    //if user NOT using app and push notification comes
                    //TODO: Your logic on click of push notification directly
                    this.nav.push(DetailsPage, {message: data.message});
                    console.log("Push notification clicked");
                }
                });

                pushObject.on('error').subscribe(error => console.error('Error with Push plugin', error));
            }
            }