Recently I needed a simple mobile app to test my simple push notifications service. In my case it was a 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 FCM service.
But first of all I’m going to start with disclaimers:
- Please remember that this is only 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 iOS platform but it’s possible to use FCM as your push notifications provider in iOS apps.
We’d like our app to have following features:
- store devices tokens in Firebase database
- overall push notifications receiving
- topic-based push notifications subscription / unsubscription
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 into our project
If you need to test it in your browser you should add this platform into 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 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 devices tokens. Go to Database tab (below Develop), click ‘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 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 notifications 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 main component (app.component.ts) we’ll subscribe to main notifications.
When it comes to topic-based notifications we’ll use tabs files generated from. On the view layer we’ll use ion-toggle element to subscribe / unsubscribe feature.
For example let’s take HomeComponent file (home.ts) and let it subscribe / unsubscribe to 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 boolean variable into it.
Okay, you can build your app and test it. Personally I prefer to do it on the real device rather than emulator. The browser is not a good idea here as well because basically Cordova plugins won’t be running there.
For test purposes I’m using simple build command to generate 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 general push notification in the Android dashboard:
And that’s it.
Source code of this app is available on GitHub.