A Step-By-Step Guide to Integrate Push Notification with FCM in Flutter
Notifications are key nowadays for any mobile app. New technologies and integrations will be challenging at times. It becomes trickier to integrate and resolve all issues when the project deadline is tight.
When we started using Flutter for our app development, we have faced challenges in integrating push notification using Firebase Cloud Messaging. We were very close, still we were missing one configuration. It took time to figure out the missing configuration. So, we have decided to share the steps we have taken to configure the push notification with FCM and test it out from there.
In this article, we will provide the steps on how to integrate push notifications into your flutter app.
Push Notification Workflow
Push notifications are messages that pop up on a user’s mobile device even when the user is not active on device. It is a reminder of actions to do in a timely manner.
It is a message push from backend to frontend under certain conditions through messaging services providers.
Our app is the front end which receives a notification triggered from our backend service. For our app to be able to receive push notifications, it must be configured and registered with a Push Notification Service Provider either Google Cloud Messaging (CGM) or Firebase Cloud Messaging (FCM). Apple Push Notification service (APNs) is an apple service. The communication between backend to frontend is not straightforward due to security reasons, it has to go through IOS or Android operating system and service.
The following are the key steps to initiate, implement and test push notifications.
1. Register our app with Google and Apple
2. Get the key / certificate
- Get a certificate key from Apple developer account for the app.
- We recommend to re-download provisional profile and integrate with the app.
3. Implement code in Flutter
For the integration of Firebase Cloud Messaging, Google’s Flutter team provided the "firebase_messaging" package. Add the package dependency to your project’s "pubspec.yaml" and load it by running flutter pub get.
- i. Android
Integration
- On the Android side, the Google Services Gradle Plugin needs to be included in the Gradle configuration.
- Add the classpath to the "dependencies" section of your "android/build.gradle" file.
-
dependencies {
// Add the google services classpath
classpath'com.google.gms:google-services:x.x.x'
} - To activate the plugin, add the apply plugin to the end of your "android/app/build.gradle":
-
// ADD THIS AT THE BOTTOM
apply plugin: 'com.google.gms.google-services' -
java.lang.IllegalStateException:
Default FirebaseAppis not initialized in this process [package name].
Make sure to call FirebaseApp.initializeApp(Context) first. - Next, create an Android-App in your Firebase-Project’s "Project Overview" section. The package name can be found and defined in your "app/build.gradle" file.
- After registering the app, download the generated google-services.json and put it into your project’s "anroid/app" folder.
- When the user taps on a notification, if the app need to be opened, add the following intent-filter inside of the main << /span>activity> element of your android/app/src/main/AndroidManifest.xml file
-
<intent-filter>
<action android:name="FLUTTER_NOTIFICATION_CLICK" />
<category android:name="android.intent.category.DEFAULT" />
</intent-filter>
4. Send and Test Notification Messages
- Remote notifications testing via simulator are not supported. So let’s test it on a physical device after installing app on the device.
- Refer to the Firebase documentation about FCM for all the details about sending messages to your app. When sending a notification message to an Android device, you need to make sure to set the click_action property of the message to FLUTTER_NOTIFICATION_CLICK. Otherwise the plugin will be unable to deliver the notification to your app when the users clicks on it in the system tray.
- For testing purposes, try the following options.
-
ii. Send test message from postman
- Postman can be used to test push notification before actually testing from our application backend.
- a. Open Postman tool, select POST
- b. Enter request URL as https://fcm.googleapis.com/fcm/send
- c. Add Headers Authorization: key= << /span>legacy_server_key> OR Authorization: key= << /span>server_key>and Content-Type: application/json.
- d. Now Select Body > raw > JSON (application/json) and add following code:
-
{
"to" : "YOUR_FCM_TOKEN_WILL_BE_HERE",
"collapse_key" : "type_a",
"notification" : {
"body" : "Body of Your Notification",
"title": "Title of Your Notification" },
"data" : {
"body" : "Body of Your Notification in Data",
"title": "Title of Your Notification in Title",
"key_1" : "Value for key_1",
"key_2" : "Value for key_2"
}
} 
- If successful, we will receive notification on our physical device. We can add more scenarios with different payload to complete through testing
-
iii. Send test message from application backend service
- When the above two testing steps are successful, it is time to try testing push notification from our application backend service.
- We use Node.JS interface to FCM for our messaging. It supports both IOS and Andorid.
- Testing can be planned for all possible scenarios with multiple testcases and test data. Push notifications is one of the key features to any mobile app. Implementing this right at the first time is challenging and fun.
This article has shown you how to set up and running push notifications using FCM and APNS for flutter project. Also, different ways to test the notification to make sure all configuration is right and resolve the issues at the right place.
Continue Learning!
