Push Notifications with Ionic 2

[richardmarais]

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?

[ankushagg93]

Ionic - Push notification

I’ve created a git repo for push notification demo https://github.com/aggarwalankush/ionic2-push-base Also, server code to push notification https://github.com/aggarwalankush/push-notification-server

FCM setup for Android Push Notifications

[richardmarais]

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?

[vaibsVB]

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.

[richardmarais]

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.

Setup for Ionic Cloud using FCM now that GCM not available for new projects

[richardmarais]

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

[vaibsVB]

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

@vaibsVB

stackoverflow.com

Firebase Cloud Messaging with Ionic app

cordova, ionic-framework, push-notification, firebase

asked by

Zeeshan Hassan Memon

on 08:56AM - 06 Jun 16

Happy Coding

[richardmarais]

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 
}

[vaibsVB]

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.

[richardmarais]

@vaibsVB

FCMPlugin

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?

[vaibsVB]

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.

[richardmarais]

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

[vaibsVB]

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.

[ankushagg93]

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.

Ionic Push Notification - Android and iOS working

Hello all Ionites! Push notifications are awesome. Everyone wants to implement them but implementing push notification in iOS or Android can be quite difficult without good tutorial. After asking so many forum/stackoverflow questions, I’m finally able to implement push notifications for both iOS and Android using APNS and FCM(earlier known as GCM) respectively. To help others a little, I wrote down the full steps with screenshot and full code on Github. Below are all the useful links. G…

Thanks

[mridul_ahuja]

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 ?

[jjacobs]

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

[mridul_ahuja]

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

[richardmarais]

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?

updating the version of com.google.android.gms to 9.2.0

[rabbounicha]

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.

[vasukihn]

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