Ionic Firebase Push Notification

This lesson, we’re going to learn how to integrate firebase cloud messaging (FCM) with your ionic project. For a push notification setup we’re going to use a plugin https://github.com/arnesson/cordova-plugin-firebase
Create new ionic project or your can choose your existing project
ionic start ionPush blank
cd ionPush
Before adding platform and plugin, we need to download google-services.json from your firebase project. Login to your firebase account & choose your project, then add android platform for your firebase project.
Fill your package name & click Register App
Download google-services.json
After downloading google-services.json you need to move to root folder

!!! Important !!! Before adding plugin, we need to copy & paste your downloaded google-service.json to your project root folder; not inside src or www

Add platform, plugin and npm module
ionic cordova platform add android
ionic cordova plugin add cordova-plugin-firebase
npm install --save @ionic-native/firebase
When you build your project, it might take few mins to download dependencies & configurations.

Ionic Firebase Push Notification Code

Include firebase plugin module in app.module.ts;

import { Firebase } from '@ionic-native/firebase';
.
.
.
providers: [
    StatusBar,
    SplashScreen,
    Firebase,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
 ]
we need to work with app.component.ts for registering our device with firebase server using getToken() method.
import { Firebase } from '@ionic-native/firebase';
.
.
.
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, firebase: Firebase) {
    platform.ready().then(() => {
      firebase.getToken().then(token => console.log(token)).catch(err=> console.log(err));
      firebase.onNotificationOpen().subscribe(data=>{
        console.log(data);
        console.log(data.name)
      }, err=> console.log(err));
    });
  }
we created firebase object from Firebase plugin. firebase.getToken() allows your to receive pushToken for a particular app on a device. firebase.onNotificationOpen() triggers, when user clicked notification from notification bar! data is a JSON object received from server.

Sending notification from Firebase

Goto your firebase cloud messaging option, click new message & fill required details then click send message. you can also add custom data if required.
ionic-firebase-push-notification
ionic-firebase-push-notification

Since we written a code for displaying token and message on console. here i have attached screenshot of console
firebase-fcm-ionic-integration
firebase-fcm-ionic-integration
ionic-push-notification
ionic-push-notification



Commentaires

Enregistrer un commentaire

Posts les plus consultés de ce blog

PhoneGap Login with PHP & MySQL

Image
phonegap-cordova-login-system Phonegap login system (cordova login) using php & mysql:  In this tutorial, we’re going to build  simple login system  using phonegap with php and mysql backend. Creating database for storing user data ( mysql ) Creating Login page for authenticate existing user Creating Signup page for add new user account Database design for phonegap login system First we need to create database for storing new user’s data such as userid, full name, email address and password. CREATE TABLE `users` ( `userid` int(1) NOT NULL, `fullname` varchar(50) NOT NULL, `email` varchar(50) NOT NULL, `password` varchar(50) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ; ALTER TABLE `users` ADD PRIMARY KEY (`userid`); ALTER TABLE `users` MODIFY `userid` int(1) NOT NULL AUTO_INCREMENT; After creating database, we need to write a php code for validating new user. we’re going to validate user based on email address. if email address...
Lire la suite

AngularJS - sorting(using orderby filter) table data example

Data sort in one of the most important and essential component in any web based projects. we can find data in order by any field then we can find any data easily from reach data. In this post, we can learn how to sort table row using AngularJS orderby filter. in bellow example you can see we have two column one for language and another for total developer. So if you click on table heading then you can sort data using orderBy filert. You can learn and see bellow example. Example <html lang = "en-US" > <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" > <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js" ></script> <body> <div ng-app = "myApp" ng-controller = "customersCtrl" > <h2 class = "text-center" > AngularJS sortable table example </h2> ...
Lire la suite

PhoneGap PHP MySQL Example

Phonegap PHP MySQL Example In this article, I would like to write an article about PhoneGap with PHP & MySQL. we’ll see how to perform CRUD (Create, Read, Update, Delete) operations with MySQL Database. Step By Step Guide: MySQL Database Creation Writing PHP code for Serverside Writing Jquery code for PhoneGap / Apache Cordova side Dependencies: PHP, MySQL, JQuery Learn More about PHP & MySQL  http://www.w3schools.com/php/php_mysql_intro.asp  or  http://www.tutorialspoint.com/php/php_and_mysql.htm Download Source Code 1. MYSQL DATABASE CREATION In this example, I’m going to create some basic database & table (course_details) with following fields such as id, title, price. CREATE TABLE ` course_details ` ( ` id ` int ( 1 ) NOT NULL , ` title ` varchar ( 25 ) NOT NULL , ` duration ` varchar ( 50 ) NOT NULL , ` price ` varchar ( 10 ) NOT NULL ) ENGINE = InnoDB DEFAULT CHARSET = latin1 AUTO_INCREMENT = 1 ; A...
Lire la suite