Notification not show in my device Ionic 3

Question

I have shown the notification on the device using cordova plugin add cordova-plugin-fcm. I am using Ionic 3. I'm get stuck please help me to solve this issue

app.componet.ts

import { Component } from '@angular/core';
import {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';
//storage
import { Storage } from '@ionic/storage';

import {HomePage} from "../pages/home/home";
import {LoginnewPage} from "../pages/loginnew/loginnew";
import {FCM} from "@ionic-native/fcm";

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any;

  constructor(private fcm:FCM,private push:Push,private storage: Storage,platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {

        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.
          this.fcm.subscribeToTopic('all');
          this.fcm.getToken().then(token=>{
            console.log("FCM Token");
            console.log(token);
          });
          this.fcm.onNotification().subscribe(data=>{
            if(data.wasTapped){
              console.log("Received in background");
            } else {
              console.log("Received in foreground");
            };
          });
          this.fcm.onTokenRefresh().subscribe(token=>{
            console.log(token);
          });
          statusBar.styleDefault();
          splashScreen.hide();
          // console.log("pushsetup start");

          //this.pushsetup()
        });
        storage.get('token').then((val) => {
          console.log('Your Token is', val);
          if(val === null || val === "non")
          {
              this.rootPage = LoginnewPage;
          }else
          {
              this.rootPage=HomePage;
          }

        });
  }
  }

How to show notification on my mobile device?

How to get token and send the server API side?

Answer 1

1. to send the token to your backend you have to do that inside of this function:

this.fcm.getToken().then(token=>{
        console.log("FCM Token");
        console.log(token);
        // put your backend api call here:
        this.yourProvider.sendTokenToServer(token)
    });

2. to be able to show notifications you need to:
   • ensure you send data from your server that actually contains "data" - see example below - "data" contains object that you can access in your app.

{
  // this part: means the text etc that user will see if its received as notification (in background)
  "notification":{
  "title":"Title",
  "body":"this is a notification to a specific topic",
  "sound":"default",
  "click_action":"FCM_PLUGIN_ACTIVITY",
},
  // this one can be received by the app if the message arrived while in foreground.
  "data":{
  "action":"ping",
  "message": "hi bro"
},
  "to":"TOKEN_GOES_HERE",
  "priority":"high"
}

Here is the part in your code where you can access "data":

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