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.

https://github.com/edismooth/ionic2-firebase

or

http://stackoverflow.com/questions/37653251/firebase-cloud-messaging-with-ionic-app

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

2 Likes

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

3 Likes

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

Hi,

I am following the plugins instructions, but get:

FCMPlugin is not defined

How do you import or declare FCMPlugin?

Example:

In app.ts, I add the following:

  private pushNotifications(): void {


    FCMPlugin.getToken(
      function (token) {
        alert(token);
      },
      function (err) {
        console.log('error retrieving token: ' + err);
      }
    )

    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));
        }
      },
      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?

{
  "notification":{
    "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 
  },
  "data":{
    "param1":"value1",  //Any data to be retrieved in the notification callback 
    "param2":"value2"
  },
    "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. GitHub - edismooth/ionic2-firebase: [DEPRECATED] Easy example of Firebase working with Ionic 2.

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;
@Component({
    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.

3 Likes

Thanks

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”]
FCMPlugin.getToken
[/quote]
into the initializeApp() function under this.platform.ready().then(() => {. Try this will work or not.

Nope, that doesn’t work for me either.

app.ts

declare var FCMPlugin;
...

  initializeApp() {
    this.platform.ready().then(() => {
...
    FCMPlugin.getToken(
      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.

2 Likes

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:

Thanks

2 Likes

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

Hi,
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