Push Notifications with Ionic 2

Thanks ankushagg93.

But, your instructions are also different to what Google (Firebase) show.

When I click Mobile APIs, then Google Cloud Messaging, I get taken to Firebase Cloud Messaging. This is different to your tutorial.

I think Google has recently updated their service and your tutorial is not reflecting the updates yet?

Yes, google developer console changed it’s Google Cloud Messaging API to Firebase Cloud Messaging. I guess now onwards we have to use Firebase Cloud Messaging to send push notifications, database operation, etc.

Many of articles not updated to Firebase Cloud Messaging implementation.
We hope @ankushagg93 will update his article very soon because this is a nice resource to follow as I thought.

Though it is not so much difficult process to create a project in Firebase Cloud Messaging for push notification.

I sharing you a link which involves the use of Cordova fcm push plugin. The link not involves thorough steps but helps in setup a little project.




And below here is the repository of Google Firebase Cloud Messaging Cordova Push Plugin https://github.com/fechanique/cordova-plugin-fcm.


Thank you vaibsVB. I will have a look at that link.

I also found this that may be useful. It also talks about the Firebase Cloud Messaging.

1 Like

This worked for me, sending notifications from the Firebase console.

All you need is to add these 3 plugins

⁠⁠⁠ionic plugin add cordova-plugin-inappbrowser
ionic plugin add cordova-plugin-fcm
ionic plugin add cordova-plugin-velda-devicefeedback

And go to Firebase Console

  • Create New Project
  • Add a Name to your project
  • Select which platform you like (ios/android)
  • Add your Package Name which is the id of your app, (you can see it in your config.xml something like id=“com.ionicframework.someTest123”) It will give you a file google-services.json
  • Paste it in the platforms/android/ directory
  • Then run ionic build android on your CLI
  • And you can now go to Notifications Page > New Message Make sure to select the app (id of the app) you added before sending push notification.

Now I just need to work out how to send notifications from the app.

see https://www.npmjs.com/package/cordova-plugin-fcm


Cool. Hence suggested two different URL’s for references.
Somehow both links shows kind of similar steps to follow.

For your scenario, the Second link work with success

Happy Coding :wink:

1 Like


I am following the plugins instructions, but get:

FCMPlugin is not defined

How do you import or declare FCMPlugin?


In app.ts, I add the following:

  private pushNotifications(): void {

      function (token) {
      function (err) {
        console.log('error retrieving token: ' + err);

      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. 
      function (msg) {
        console.log('onNotification callback successfully registered: ' + msg);
      function (err) {
        console.log('Error registering onNotification callback: ' + err);


Also, to add a notification, it says, do the following. But this just does not compile. It is not Typescript or Javascript. Where do you add this?

    "title":"Notification title",  //Any value 
    "body":"Notification body",  //Any value 
    "sound":"default", //If you want notification sound 
    "click_action":"FCM_PLUGIN_ACTIVITY",  //Must be present for Android 
    "icon":"fcm_push_icon"  //White icon Android resource 
    "param1":"value1",  //Any data to be retrieved in the notification callback 
    "to":"/topics/topicExample", //Topic or single device 
    "priority":"high", //If not set, notification won't be delivered on completely closed iOS app 
    "restricted_package_name":"" //Optional. Set for application filtering 

I followed the first link i.e. https://github.com/edismooth/ionic2-firebase

In this the code you shared, which is written inside initializeApp() function of app.ts file. And declare the FCMPlugin above the Component as

declare var FCMPlugin;
    templateUrl: 'build/app.html'

Have a look at this file https://github.com/edismooth/ionic2-firebase/blob/master/app/app.ts.
May this helps you.



Yes, that’s exactly what I do:

declare var FCMPlugin;

It compiles, but at run time, I get:

Error: Uncaught (in promise): ReferenceError: FCMPlugin is not defined

Also, the example above doesn’t send a notification?

I’m also not getting much into this as of now. I just cloned the project from GitHub and applied the commands.

I’m not much sure but at least just try to add the [quote=“richardmarais, post:8, topic:63851”]
into the initializeApp() function under this.platform.ready().then(() => {. Try this will work or not.

Nope, that doesn’t work for me either.


declare var FCMPlugin;

  initializeApp() {
    this.platform.ready().then(() => {
      function (token) {

results in the following at run time:

Error: Uncaught (in promise): ReferenceError: FCMPlugin is not defined

I’m also new to this plugin and all.

Can you just clone this project https://github.com/edismooth/ionic2-firebase and follow the steps suggested by them. Just check whether this works for you or not. If works then we may find what is the problem relatively.


Hello All,

I updated the instructions to use FCM. No need to change anything in app. Just a new way to generate API_KEY and it’s good - just 4 steps. :+1:



I tried your solution but I’m getting the following error while building it :
Please fix the version conflict either by updating the version of the google-services plugin (information about the latest version is available at https://bintray.com/android/android-tools/com.google.gms.google-services/) or updating the version of com.google.android.gms to 9.2.0

Any idea how to fix it ?

In your android sdk manager make sure you have the Google Play Services installed. http://stackoverflow.com/questions/34812616/could-not-find-any-version-that-matches-com-google-android-gmsplay-services-plu

I currently have Google Play Services version 33 installed, and Android SDK Manager is not showing any updates for Play services.

Hi mridul_ahuja, I am also getting the same error now:

Execution failed for task ':processDebugGoogleServices'.
> Please fix the version conflict either by updating the version of the google-services plugin (information about the latest version is available at https://bintray.com/android/android-tools/com.google.gms.google-services/) or updating the version of com.google.android.gms to 9.2.0.

It looks like something must have updated, I think in the phonegap-plugin-push plugin that requires an updated dependency (i.e. com.google.android.gms to 9.2.0.)

Have you found a solution?

1 Like

I had the same issue. It worked for me by removing cordova plugin phonegap-plugin-push from the project.
The project should not have FCM Plugin and phonegap-plugin-push at the same time. So you need to choose one plugin and send notifications with it.

1 Like

Hi Ankush,

I was wandering if it’s possible to send push notification to desktop browsers from Ionic 2 application?

Can you please let me know any info if you have ?

Thanks in Advance!!!

Hi Vasukihn,

Have you managed to get an answer to your question?

I am also looking to deploy my app to a web server accessible through a web browser, but there it obviously does not have access to cordova plugins. Have you managed to get push notifications working?

Hi Richardmarais,

I haven’t heard from anyone and not yet implemented. I am also waiting for an answer or hint to proceed further