Ionic 3 using Push Notification

Ionic 3 using Push Notification With Firebase

Firebase:

firebase  is google platform its used mobile and web application , google provide  some features  like as  in app messaging , firebase push notification , google cloud messaging , remote config , firebase cloud function , firebase database and firebase firestore if you use firebase in your app is high_quality application, relabel and more fast

Steps:

Login Into Your Gmail Account 

search Firebase to Google --> Open Console  -> create New Project ---> etc...Open Project  (android,ios,web) --> select oneI choose AndroidRegister App  --> com.yournameapp.app  ( your Config.xml file id like same as       com.yournameapp.app) 

Nick Name --> Optional if you want to give or not necessary Register AppDownload Googleservice.json File Copy this File Under Root Directory of Your Project  

Add FireBase SDK to Your Build.gradle file platform/android/...etc

Install this Plugin ana open the cmd prompt change directory to switch your project directory and run this command 

$ionic cordova plugin add cordova-plugin-fcm-with-dependency-updated

$npm install @ionic-native/fcm@4 --save

then open your project under src/ app

select app.modules.ts open this file -->add the modeuls 

var firebaseConfig = {  

apiKey: "fgfhg", 

 authDomain: "test-9c526.firebaseapp.com", 

 databaseURL: "https://test-9c526.firebaseio.com", 

 projectId: "test-9c826",  

storageBucket: "test-9c526.appspot.com",

  messagingSenderId: "54354353545", 

 appId: "1:34844348772050:web:d775454f03f53fe10cee0tgg86a8b"

};

@NgModule({ 

 declarations: [   MyApp,    HomePage  ], 

 imports: [    BrowserModule,    AngularFireAuthModule,    AngularFireDatabaseModule,    AngularFireModule.initializeApp(firebaseConfig),    IonicModule.forRoot(MyApp)  ],  bootstrap: [IonicApp],  entryComponents: [    MyApp,    HomePage  ], 

 providers: [    StatusBar,    AdMobFree,    Geolocation,    Diagnostic,    NativeGeocoder,    SocialSharing,    SplashScreen,    CallNumber,    {provide: ErrorHandler, useClass: IonicErrorHandler}  ]})

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.    

   }else{      

// Notification was received in foreground. Maybe the user needs to be notified.       }    });

FCMPlugin.onTokenRefresh(function (token){});     } 

tokensetup() {   

 var promise = new Promise(( resolve, reject) => {  

    FCMPlugin.getToken( function (token){   

 resolve (token);      },

 (err) => {     

  reject (err);  });   

 })    return promise;  } 

 storetoken(t) {   

 this.afd.list(this.firestore).push({      uid: " user1 ",     devtoken: t    }).then(() => {   }).catch(() => {      //  alert (' Token not stored ');      }) }

Build Apk  installe it then Verify sdk the  go to google  cloud Messaging tab send message give notification name and title , target the app , sounds are enable or not then finally send or draft