Recently I needed a simple mobile app to test my simple push notifications service. In my case, it was an Android app receiving notifications from Firebase Cloud Messaging.
In this article, I’m going to share my experience with you. I’ll show you how you can create your own simple Ionic 4 Android app and integrate it with the FCM service.
But first of all, I’m going to start with disclaimers:
- Please remember that this is only a simple starter example. To make sure your notifications behaving properly you have to store user subscriptions somewhere (for example in Firebase or local storage).
- This article doesn’t cover the iOS platform but it’s possible to use FCM as your push notifications provider in iOS apps.
We’d like our app to have the following features:
- store devices tokens in the Firebase database
- overall push notifications receiving
- topic-based push notifications subscription / subscription
The 2021 update:
For Ionic 5 and Capacitor-based applications, I’d suggest using this plugin.
The approach shown in this blog post is using Cordova Firebase plugin.
We will need:
- Ionic 4,
- Android SDK,
- Firebase account and app created,
- and a little bit of patience 😉
Let’s go – project preparation
First of all, we need to create a new Ionic project. I’m going to use a tabs template and ionic-angular type of the project.
At this point, we can add an Android platform to our project
If you need to test it in your browser you should add this platform to the project
Then we have to integrate a Cordova plugin for Firebase
Then we’ll need some packages from NPM – Firebase Ionic Native package and AngularFire2, a library for Angular and Firebase integration.
Now it’s time to configure a Firebase project. You should log into Firebase console and add a new project if you don’t have one already.
Now, go into your project’s console and add a new Android app to your project. Please note that a package name has to be exactly the same as the one used in your config.xml file.
Download generated google-services.json file and place it into your Ionic’s project root folder.
Now it’s time to create a Firebase database. We’ll use it to store user’s device tokens. Go to the Database tab (below Develop), click the ‘Create database‘ button, and choose test mode.
Back to the code
Okay, it’s time to finally configure our app. First of all, we have to configure Firebase libraries in the main module file – app.module.ts.
Use the credentials you have in your google-services.json file in order to configure Firebase properly.
Now, it’s time to create a service class for notification handling. Later on, we’ll import it into our providers in app.module.ts. Let’s call it NotificationsService.
Now we can use our service inside components. In the main component (app.component.ts) we’ll subscribe to main notifications.
When it comes to topic-based notifications we’ll use tabs template files, generated from the initial command. On the view layer, we’ll use the ion-toggle element to subscribe / unsubscribe feature.
For example, let’s take the HomeComponent file (home.ts) and let it subscribe / unsubscribe to a topic called homeTopic.
Let’s use handleSubscription() function in the view layer (home.html). The key thing is the ion-toggle element. It’ll fire our function by every state change by passing the boolean variable into it.
Okay, you can build your app and test it. Personally, I prefer to do it on a real device rather than an emulator. The browser is not a good idea here as well because basically, Cordova plugins won’t work there.
For test purposes, I’m using simple build command to generate an unsigned *.apk app file.
Now you’re ready to test push notifications on your phone.
Check your Firebase database document after app initialization. There should be your device’s token stored. The date-time string in the user key was used just for debugging purposes, you probably won’t need this in production.
Take the token value and send some direct notifications from Cloud messaging tab in your Firebase console. Then you can send topic-based notifications and general notifications for all users there.
This is the effect of homeTopic notification:
And this is a general push notification in the Android dashboard:
And that’s it.
The source code of this app is available on GitHub.