Ionic 2+ push notifications with FCM.
Finally, all the info in one place.
Author’s pointless babbling:
I spent two full days figuring this all out the first time. It’s actually really easy once you know how, but the information was so fragmented it took forever to put the pieces together.
Then I forgot to write it down. Then I went out and drank a bunch of beer to celebrate putting it together, and probably screwed up my memory of the process. A month later, I went to do it again and um… uh… hmmm… SHOOT!
So here it all is in writing for the benefit of you and my future self. Past Self: “Sorry current self.” 😭
Actual useful information:
Firebase Setup:
Go to firebase > gear > project settings.
Add an iOS app
Click ADD APP and select iOS. Add your app id like com.example.myapp from config.xml to Firebase. Click register app.
Download the GoogleService-Info.plist file and put it in the root folder of your project.
The .plist file doesn’t magically go to the right place in your iOS folder like the docs say it does. Well, actually, it does, but it goes in malformed.
You’ll need to manually copy it from the project’s root folder to the Resources folder in Xcode. In OSX, you can alt drag it from finder to Xcode to copy it.
But don’t do that yet because we need to add the plugin to the build first! If you already did, don’t worry, it won’t be the last time. You’ll need to manually copy it every time you remove and re-add your iOS app.
Go back to Firebase and click continue. Don’t worry about pods, just click continue again. Don’t worry about native code either, just click finish.
Here’s the sneaky part that took me 10 hours to figure out. I swear I’m not dumb, I just could not find this in any of the other docs. 😡 And of course, like most of the really annoying problems I run into, it’s iOS only. I didn’t say that out loud, did I?
Open your apple developer account page and go to “Certificates, IDs & Profiles”. It took me about a year to stop getting anxiety every time I opened this page. We’re going to enable push notifications for our app.
Under Identifiers, select “App IDs.” Select your app and click the “Edit” button. Check “Push Notifications” and click “Create Certificate” under development. Follow the instructions and continue unless you already have a certificate saved somewhere, then use that and continue
I don’t think there’s any need to download the cert from this because I believe it will give you the old key when the new one is easier to use and doesn’t expire. Feel free to check it out yourself. I can’t be bothered.
Next we’re going to get a security key to give to Firebase. Select All under Keys on the left menu. Click plus to add a key and name it. Check APNs then click continue. Click Confirm. Download the file, copy the key, and click done.
Go back to your Firebase Settings and click the Cloud Messaging tab. Go down to your iOS app configuration and under “APNs Authentication Key” click upload. Upload the .p8 file Apple just gave you.
Paste the Key in the “Key ID” field. Go back to the apple developer page. Open App IDs under Identifiers on the left menu. Select the appropriate app and copy the Prefix. Paste it where Firebase is asking for it. Then click upload.
Add an Android App
Click add app and select Android. Add your id again and register app. Put the google-services.json file in your app’s root folder. This one will work magically. Don’t worry about Gradle, just click finish.
Now, take a minute and compare the Android setup to the iOS setup. See how much more text there is explaining iOS than Android? That’s because I spent a lot more words complaining about Apple rather than just giving you the information you need. You’re welcome. 👍
Ionic setup
Now let’s install the Ionic Native FCM Plugin and add it to our app.
ionic cordova plugin add cordova-plugin-fcm
npm install --save @ionic-native/fcmIn your app.module.ts, stick this with your other Ionic Native imports:
import { FCM } from ‘@ionic-native/fcm’;Don’t forget to add it to the providers: section of your module.
Next it needs to be added to a Component. We’re going to add it to our root Component app.component.ts so that we start listening to notifications ASAP. Import it like you did in app.module.ts and add it to your constructor:
...blah: BlahBlah, private fcm: FCM)Now, drop this inside platform.ready():
this.fcm.subscribeToTopic('all');this.fcm.getToken().then(token => {
// backend.registerToken(token);
});this.fcm.onNotification().subscribe(data => {
alert('message received')
if(data.wasTapped) {
console.info("Received in background");
} else {
console.info("Received in foreground");
};
});this.fcm.onTokenRefresh().subscribe(token => {
// backend.registerToken(token);
});
🎶Stop! Wait a minute! Fix up my app, there’s a problem with it.🎶 We shouldn’t put anything in app.component.ts unless it’s absolutely necessary. The subscription logic should go in its own Provider. I’m only putting it there so that there’s one less thing to go wrong when I test my notifications. I won’t include it in this tutorial, but I’m going to move it somewhere appropriate once I know it’s working.
The backend.registerToken commands are pulled from the Ionic example. They’re meant to call an imaginary method once those subscriptions get fired off.
That should be it. Time to test it on your device. I recommend testing this on your Android first because Apple’s extra security is much more likely to cause things to go wrong. If you get it working on Android, at least you know your installation and setup was successful. If it then doesn’t work on Apple, you know that it’s a security problem or an Apple config problem and nothing else.
Make sure your certs are in order and everything is right with Firebase. If it works on both Android and iOS, you’re welcome. 😎
Before you launch the app on your devices, make sure to remove and re-add them so they get the plugin installed. Also, remember to manually copy the .plist file to the Resources folder in Xcode.
Once your app is up and running on your Android, go back to Firebase and select Grow > Notifications from the menu to the left.
Then click “send your first message.” Write a clever message. Then select Android from the target dropdown and hit “Send Message” and then “Send.”
If your app is open you should get an alert saying “message received.” Try going back to the home screen (out of your app) and sending another one. This one should show up in your top bar just like a regular message. The idea behind the difference is so that you can handle the notification from within the app if the user is actively using it.
Now, clench your buttocks, it’s time to try this on iOS. Open up Xcode and select your app from under the Folder icon on the left menu. In the general tab, make sure that your team is set under signing. Then, in the capabilities tab, make sure Push Notifications are on. And start your app in the usual way. God speed young Padawan!
Wrap up
While writing this tutorial I spent six hours adding FCM to my app. I had a fairly strong understanding of what to do but it was still hard. I ran into these problems:
- The .plist file was from the wrong project.
- I forgot to remove and re-add my project, and my device didn’t have the plugin.
- Somehow the .plist API_KEY was wrong.
Despite its relative simplicity, there are a lot of things that can go wrong with this process. It’s really a potentially huge pain in the ass. Stick with it though. It can be done! And it’s totally worth it when you come out the other side.
