Hi Friends,
Hope you are all well. This post is one of the most requested posts on this site. We’ll see how to send push notifications to specific devices through a program. This is done with the help of device tokens and the cordova fcm plugin.
Let’s get started.
A screencast of this post
The complete code of this post can be found here.
I’ll divide the post into two parts.
1) Part 1 – Ionic 2 app that allows us to login and send a message.
2) Part 2 – Real-time database trigger running on firebase cloud that sends a push notification.
First scaffold out an Ionic 2 application. Then install the cordova-plugin-fcm using the below command.
|
1 |
ionic plugin add cordova-plugin-fcm |
Okay. Now let’s install firebase and angularfire2.
|
1 |
npm install firebase angularfire2 --save |
Generate a login page using the below command.
|
1 |
ionic g page login |
Now open up app.module.ts file and modify it as shown below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
import { BrowserModule } from '@angular/platform-browser'; import { ErrorHandler, NgModule } from '@angular/core'; import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular'; import { SplashScreen } from '@ionic-native/splash-screen'; import { StatusBar } from '@ionic-native/status-bar'; import { AngularFireModule } from 'angularfire2'; import { AngularFireDatabase } from 'angularfire2/database'; import { MyApp } from './app.component'; import { HomePage } from '../pages/home/home'; import { Login } from '../pages/login/login'; var config = { apiKey: "<yourkeyhere>", authDomain: "<yourdomainhere>", databaseURL: "<yourdburlhere>", projectId: "<yourprojectidhere>", storageBucket: "<yourbuckethere>", messagingSenderId: "<yoursenderidhere>" }; @NgModule({ declarations: [ MyApp, HomePage, Login ], imports: [ BrowserModule, IonicModule.forRoot(MyApp), AngularFireModule.initializeApp(config) ], bootstrap: [IonicApp], entryComponents: [ MyApp, HomePage, Login ], providers: [ StatusBar, SplashScreen, AngularFireDatabase, {provide: ErrorHandler, useClass: IonicErrorHandler} ] }) export class AppModule {} |
Next, open up your login.html and include some code as shown below.
|
1 2 3 |
<input type="text" [(ngModel)]="username" placeholder="username"> <input type="password" [(ngModel)]="password" placeholder="password"> <button ion-button (click)="signin()">Login</button> |
Open up login.ts and write the signin function.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
import { Component } from '@angular/core'; import { IonicPage, NavController, NavParams } from 'ionic-angular'; import { AngularFireDatabase } from 'angularfire2/database'; import { HomePage } from '../home/home'; import firebase from 'firebase'; /** * Generated class for the Login page. * * See http://ionicframework.com/docs/components/#navigation for more info * on Ionic pages and navigation. */ @IonicPage() @Component({ selector: 'page-login', templateUrl: 'login.html', }) export class Login { username; password; constructor(public navCtr: NavController, public navParams: NavParams, afd: AngularFireDatabase) { } ionViewDidLoad() { console.log('ionViewDidLoad Login'); } signin() { firebase.auth().signInWithEmailAndPassword(this.username, this.password).then(() => { this.navCtr.setRoot(HomePage); }).catch((err) => { alert('Login failed' + err); }) } } |
We have simply got the username and password from the user and we use it to login into our app.
Open up home.ts file and add the below code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; import { AngularFireDatabase } from 'angularfire2/database'; import firebase from 'firebase'; declare var FCMPlugin; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { firestore = firebase.database().ref('/pushtokens'); firemsg = firebase.database().ref('/messages'); 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. alert( JSON.stringify(data) ); }else{ //Notification was received in foreground. Maybe the user needs to be notified. alert( JSON.stringify(data) ); } }); FCMPlugin.onTokenRefresh(function(token){ alert( 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: firebase.auth().currentUser.uid, devtoken: t }).then(() => { alert('Token stored'); }).catch(() => { alert('Token not stored'); }) this.afd.list(this.firemsg).push({ sendername: firebase.auth().currentUser.displayName, message: 'hello' }).then(() => { alert('Message stored'); }).catch(() => { alert('Message not stored'); }) } } |
Let’s break this down.
- The FCM Plugin methods are pretty much self-explanatory. They do as their name suggests. The onNotification method watches for notifications, and displays the notifications in alert.
- We simply get the device token of the device that the user uses to login and store it in a pushtokens collection. Then we push a message to the messages collection.
- We also have a onTokenRefresh method that jumps into action whenever the device token is refreshed. (Here, we haven’t done anything in that method, but in an ideal scenario you need to store the new token in the pushtokens collection).
Now before we run this app, we need to do a few things.
Open up your firebase console. You should see a screen as shown below.
Now in this screen click on Add firebase to your android app.
You will see a screen as shown below.
From your config.xml copy the widget it and paste it in the package name.
Click on register app and you will see a big blue button called google-service.json.
Click on the button. Once the google-services.json file is downloaded, copy and paste it on to your Ionic project’s main folder.
Run the app on any device now. It should go fine.
I will explain how to make use of this token stored in the collections and send msgs automatically to devices whenever a message is stored in the next post. Stay tuned.
Hope this helped you guys. Share it with someone else and help them too.
Thanks for reading. Peace.. 
