Firebase Cloud Messaging with Ionic app

39
votes

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 am looking at following docs:

https://firebase.google.com/docs/cloud-messaging/chrome/client#project-setup

that says:

  • Websites in Chrome can implement push messaging through service workers and web
  • app manifests following the Webpush standard. Chrome apps and extensions can access the FCM service directly through chrome.gcm
    API.

Does it mean I can use it in my ionic app for both android/ios, since app is built using cordova?

Also it will be very helpful if there is any implemented example, I can see and learn from.

Thanks

5
cordovaionic-frameworkpush-notificationfirebasefirebase-cloud-messaging
I prefer using third part services as OneSignal, Pushbots, etc. I think the new Firebase Notifications is only compatible with native iOS/Android and there's not any documentation about Cordova. Check it here – Gerard Cuadras
So did you find the solution? – Murtuza
@Murtuza, I used this> npmjs.com/package/cordova-plugin-fcm – Richard
@Murtuza did you find any solution – Hassan Abbas
@HassanAbbas we are yet to implement chat feature in our app using firebase. May be few weeks from now. Will update to if it works. – Murtuza

5 Answers

49
votes

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.

8
votes

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.

5
votes

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.

3
votes

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.

1
votes

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