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

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

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.