Firebase Cloud Messaging with Ionic app

Question

I am developing android/ios app using ionic framework (web technologies) and I want to add Push Notification with the help of new firebase feature FCM.

Right now I a

Answer 1

I know this question is jurassic already but just for information of future mobile developers using Ionic framework. This is 100% working now, I've been using it for the past 3 weeks.

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

Next, go to Firebase Console and

• Create a New Project and give it a name;
• 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").

The Firebase Console will give you a file named google-services.json .

• Paste it in the platforms/android/ directory
• Run ionic build android on your CLI

You can now go to Notifications Page > New Message

Make sure to select the app (id of the app) you added before sending push notifications.

Answer 2

You can use FCM with cordova without a problem but it requires writing native code for Android, iOS and other platforms you want to use. Luckily the cordova community is pretty big and the work is already done. The following plugin states to do exactly what you want.

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

I haven't tried the plugin myself yet but the readme says you can subscribe to topics from javascript and call the onNotification function to listen for notifications, handy when your app is in foreground.

Answer 3

The FCM support for JS/browser relies on the browser's notification API's, of which I don't believe cordova has one that will work natively. You can and should use FCM for all platforms but you'll have to work through adding support for each platform manually or wait for the push plugin development.

The phonegap push plugin is being updated to support FCM: Migrate to Firebase Cloud Messaging #929

Alternatively you can use the old GCM platform with the phonegap plugin already but you'll want to update your server side push API to use FCM as soon as the plugin is ready.

Answer 4

I managed to get it work work on IOS. Here's what I did.

1. Go to Firebase and add a new IOS app for cloud messaging. Follow the instructions and fill up the simple form for your app ID etc. You will generate the GoogleServices-Info.plist file and download. Ignore the cocoapods stuff. You don't need it.

2. Navigate to your Ionic app platforms/ios and open the xcodeproject file with XCode.

3. Paste thedownloaded GoogleServices plist file to the root of your Xcode project file.

4. Run. Or you can try saving then do ionic build ios, ionic emulate ios.

I added the old phonegap-plugin-push earlier. This had to be removed from my config.xml or else the IOS won't build successfully.

Answer 5

You may check this: works for iOS and Android https://github.com/mail2lulu/cordova-plugin-fcm.git