Push Notifications with Ionic 2


#1

Hi All,

I am trying to set up Push Notifications with Ionic 2.

I believe I need to set up Google Cloud Messaging (GCM). However, every tutorial I look at seems out of date, even pretty recent ones including this Ionic 2 one. I think Google have changed their service to rather use Firebase.

Does anyone have reference to a tutorial that explains how to set up GCM with Ionic 2 please?


#2

#3

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?


#4

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.


#5

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.


#6

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


Push notifications in ionic 2
#7

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:


#8

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 
}

#9

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;
@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.


#10

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?


#11

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.


#12

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


#13

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.


#14

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


#15

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 ?


#16

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


#17

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


#18

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?


#19

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.


#21

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!!!