39

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

Zeeshan Hassan Memon
  • 7,232
  • 3
  • 36
  • 50

5 Answers5

49

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.

SMR
  • 6,320
  • 2
  • 32
  • 55
JC Borlagdan
  • 2,662
  • 3
  • 24
  • 44
  • Hi Borlagdan. It worked for me. But I am wondering how to get the device id in my ionic app? – Neel Kamal Sep 02 '16 at 06:41
  • may I ask what are you gonna use the device id for? – JC Borlagdan Sep 02 '16 at 08:02
  • I will use it to send notification to a particular user..Anyway I have solved this by following ionic's updates documentation. – Neel Kamal Sep 02 '16 at 09:54
  • Hi @JCBorlagdan , I followed everything and when I send message through Notifications Page, I am getting "Error sending message". Do I have to add anything in app.js or anywhere? I didn't do the final step mentioned while creating new project in FCM - add dependency - gradle 3.0 & apply plugin: 'com.google.gms.google-services'. If I add while building it is throwing error. – Shankar Sep 11 '16 at 19:45
  • if you're doing android, no need to add anything from gradle.. all you need to do is save the google-services.json to your build folder.. if the error is from the browser try using other browser,.. not sure what causes the issue, since i'm still using the push notification up until now – JC Borlagdan Sep 13 '16 at 04:07
  • Okay, yes I'm trying in Android, I am getting error message in Firebase console while trying to send message, it is showing "Error sending message" – Shankar Sep 13 '16 at 16:12
  • have you added google-services.json already? is the app closed when you're trying to send the push? – JC Borlagdan Sep 15 '16 at 01:49
  • Yes I have added google-services.json and the app was opened. After downloading google-services.json, there was next/final step to add gradle 3.0 & apply plugin: 'com.google.gms.google-services' while adding that it was throwing error. – Shankar Sep 16 '16 at 17:34
  • Suddenly it is working now, not sure what was the problem. When the app is closed getting the notification without sound and if the app is opened notification is not coming up, but in FCM - it shows message sent. Thank you! – Shankar Sep 16 '16 at 17:39
  • yes when the app is open, notification isn't received by the mobile, there's a need for you to change the setting of fcm, in your js, which i'm still trying to figure out how. anyway good to know you're now getting the notification. :) – JC Borlagdan Sep 17 '16 at 03:17
  • 6
    I get the following when I follow the instructions above, and build (I'm using Ionic2). Any Ideas please? `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.` – Richard Sep 20 '16 at 10:08
  • `Found com.google.android.gms:play-services-maps:+, but version 9.2.0 is needed for the google-services plugin. Found com.google.android.gms:play-services-location:+, but version 9.2.0 is needed for the google-services plugin. Found com.google.android.gms:play-services-gcm:9.0.2+, but version 9.2.0 is needed for the google-services plugin. :processDebugGoogleServices FAILED` – Richard Sep 20 '16 at 10:11
  • needed to update project.properties to have the 9.2.0 version – Richard Sep 20 '16 at 14:42
  • @JCBorlagdan Which JS we need to modify, I didn't include any JS files, and also how to send the message to **selected user**? I am trying through [PHP](http://stackoverflow.com/questions/37371990/how-can-i-send-a-firebase-cloud-messaging-notification-without-use-the-firebase). Not sure from where we can get **"message_id"** – Shankar Sep 25 '16 at 01:43
  • I meant about **"registration_id"**, not message_id, I think registration_id is device id, and I think we can get through ionic.Platform.device() or window.device.uuid – Shankar Sep 25 '16 at 01:57
  • @Richard, were you able to solve this problem ?? I'm asking cuz I myself am getting this error. – mrid Oct 14 '16 at 13:06
  • @JCBorlagdan please can you provide tutorial. i follow all steps. but unable to achieve my goal.. – Hassan Abbas Oct 20 '16 at 19:17
  • @HassanAbbas don't have free time yet, coz I'm at the office all day till next month, what part do you encounter problem or what problem are you encountering? – JC Borlagdan Oct 21 '16 at 00:27
  • @ i posted my question http://stackoverflow.com/questions/40029942/firebase-cloud-messaging-with-ionic-app-not-working – Hassan Abbas Oct 21 '16 at 07:00
  • also this http://stackoverflow.com/questions/40164284/cordova-cant-build-after-adding-cordova-plugin-fcm – Hassan Abbas Oct 21 '16 at 07:02
  • So I'm just now reading this now, but does this same process work for iOS? – Stevie Star Mar 20 '17 at 22:20
  • i haven't tried this now on iOS. but check Ben Loois answer below – JC Borlagdan Mar 21 '17 at 01:25
  • Why do we need cordova-plugin-inappbrowser and cordova-plugin-velda-devicefeedback? There is not mention of server key or sender id from firebase. – Xerri May 11 '17 at 16:06
  • inappbrowser for some reason the notification is considered as a web which is outside the app but the device see it as inside the app.. velda device feedback is just for report to reflect on firebaseconsole and is referenced by the package name of your app – JC Borlagdan Jun 08 '17 at 18:21
  • I had to put google-services.json into the project root instead of platforms/android. Everything else worked fine. – Davor Sep 14 '17 at 07:38
  • @JC Borlagdan Working Fine notification came but i am not getting my app icon in that notification help anyone how to get my app icon in Push notify – jose Sep 25 '17 at 12:10
  • @jose as far as I can remember you can place the icon in the firebase console – JC Borlagdan Sep 25 '17 at 23:38
  • @JC Borlagdan i don't know how to place icon inside the firebase console give example or link plz – jose Sep 26 '17 at 04:59
  • @JC Borlagdan yes already there but it's not shown while notification coming time – jose Sep 26 '17 at 05:24
  • @jose are you using ionic? – JC Borlagdan Sep 26 '17 at 05:26
  • @JC Borlagdan yes i am using ionic1 – jose Sep 26 '17 at 08:16
  • and does your app really have an icon when you put it in your android phone? coz firebase uses the icon that is attached to the config that holds the app id you registered – JC Borlagdan Sep 27 '17 at 00:40
  • but it's wont't shown @JCBorlagdan i need to change anything – jose Sep 27 '17 at 06:43
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/155396/discussion-between-jc-borlagdan-and-jose). – JC Borlagdan Sep 27 '17 at 07:43
  • once app and minimzed then notify worked maybe i closed app and send notify it's not opening @JCBorlagdan help! – jose Sep 29 '17 at 18:04
  • i'm not sure about your problem, of how it doesn't open when you click the app since FCM has the code for it.. i think you're lacking SDK for your android platform – JC Borlagdan Oct 01 '17 at 23:14
8

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.

Paolo Stefan
  • 9,358
  • 4
  • 43
  • 63
Ben Looi
  • 178
  • 2
  • 9
  • For people using Phonegap build, an option is to use the following plugin, fork it, and then place your GoogleServices / google-services instead the placeholder files, commit, and then use your forked plugin as local plugin ( cordova(or ionic) plugin add /path/to/my/plugin/my.plugin.folder.here/ ) Builds succesfully, doesn't crash the app on iOS (unlike the original plugin), and has a nice interface :) https://github.com/guyromb/cordova-plugin-fcm-plus – twicejr Sep 15 '16 at 19:20
  • When you create the ios app in firebase do you do the cocoapods setup in steps 3 and 4? When I do, if I try to run `ionic build ios` from the command line afterwards I get this error; ` The following build commands failed: CompileC build/Apparent.build/Debug-iphonesimulator/Apparent.build/Objects-normal/i386/AppDelegate.o Apparent/Classes/AppDelegate.m normal i386 objective-c com.apple.compilers.llvm.clang.1_0.compiler (1 failure) Error: Error code 65 for command:... – Brad W Nov 08 '16 at 17:57
  • did you added cordova-plugin-fcm on this? – JC Borlagdan Mar 06 '17 at 03:35
5

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.

Tim Baas
  • 5,585
  • 5
  • 42
  • 66
  • What about getting notification in the background. Do we need to do server side coding for this? – Murtuza Sep 12 '16 at 07:13
  • 1
    @Murtuza You would indeed need server side code, the plugins I've tried don't allow you to do these on the front-end. The badge-number is updatable from the front-end though. – Tim Baas Sep 14 '16 at 11:57
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.

CuriouslyCory
  • 31
  • 2
1

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

Satya
  • 31
  • 6
  • 5
    Link only answers are not terribly useful; the link could become broken or otherwise changed. Please add the relevant context from the link to your answer. – Dave Jul 12 '16 at 10:16