How to send push notifications to Flutter apps (Android & iOS) with FCM using Novu
Learn how to integrate Firebase Cloud Messaging with Novu and send notifications to Flutter apps
Prerequisites
To complete this guide, you will need the following:
- Apple Developer membership (to obtain the required permissions to send push notifications).
- A machine running MacOS to work on building the Flutter app for iOS devices.
- Firebase account
- Novu account.
- Android Studio configured with Dart and Flutter plugins.
- Xcode installed on your machine.
Check out the Flutter app code for this guide on GitHub.
Set up and Create a Flutter App
If you have an existing Flutter App, you can skip this step.
If you are creating a brand new Flutter app, please follow this guide.
Set up Firebase and FlutterFire
Please follow this guide to set up a Firebase project and integrate Firebase Cloud Messaging in your Flutter app.
Set Up Apple Integration
Please follow this guide to ensure that everything is set up on your iOS device to receive messages.
There is an optional section about allowing Notification Images. Follow the steps to install and activate the notification service extension. We’ll need it later in this guide to display images as part of the push notifications from FCM.
Set Up FCM Notification Permission & Registration Token
We’ll add code to initialize Firebase and ask the user’s permission to receive notifications.
Open up the lib/main.dart
file in your Flutter app and replace everything with the code below:
lib/main.dart
There are 4 sections to pay attention to:
The Request permission code block
This shows the notification permission prompt to the user when the user interacts with the app for the first time. If the user allows it, then we can get a token.
Registering and obtaining the FCM token for the device
A device’s token is needed for the specific device to receive messages. The getToken()
returns the registration token for the app instance on the device.
The foreground message handler
This handler listens to when a push notification is sent from FCM to the device. If the app is in the foreground, then it prints out the notification title, body, messageId, and data properties to the console.
The background message handler
This handler listens to when a push notification is sent from FCM to the device. If the app is in the background, then it prints out the notification title, body, messageId, and data properties to the console.
Now, run the Flutter app. Your device should be connected to your machine to enable the app to run on it.
Running the app to build on my device
Notification Permission Prompt
Flutter app running waiting to receive push notifications
Cloud Message Test
In your Firebase project, navigate to Engage
section and click on Messaging
.
Click on Create your first campaign
and select Firebase Notification messages
.
Enter the Notification title
and the Nabigateotification text
, and click on Send test message
.
We must copy and paste this FCM registration token to confirm our device. You can find it logged as shown earlier in our editor.
Click on ‘Test’.
You should see the notification on your device!
Yaay! Push Notification from FCM on my device
Sign Up on Novu
Let’s use Novu to fire push notifications via FCM. First, sign up on Novu Cloud?utm_campaign=docs-gs-guides-fc-flutter.
Next, immediately configure FCM as a Push channel provider.
You can also do this by heading straight to the Integrations Store
. Click on Add a provider
.
Connect FCM as a Push Channel provider
You only need to configure FCM with Novu with the Firebase Service Accounts private key.
To acquire the account key JSON file for your service account, follow this instructions:
- Select your project. Click the gear icon on the top of the sidebar.
- Head to project settings.
- Navigate to the
Service accounts
tab. - Click
Generate new private key
, then confirm by clickingGenerate key
. - Click
Generate key
to download the JSON file. - Once the file is on your machine, paste the entire JSON file content in the
Service Account
field of the FCM provider in the Integration store on Novu’s web dashboard.
Make sure your service account key JSON content contains these fields:
Create a Notification Workflow
In Novu, creating a workflow means establishing a blueprint for sending notifications within your app. This unified structure ties together email, in-app messages, SMS, push notifications, and chat into one entity.
Each workflow has a unique name and identifier and includes customized content for various channels, using {{handlebars}}
variables for personalization.
This ensures consistent platform notifications and allows dynamic adjustments for individual subscribers, scenarios, and use cases.
Navigate to 'Workflows' tab and click on 'Blank Workflow'
Add (Drag & Drop) the Push channel node to the workflow
Click on the node, and start to modify the content. Add a title and content. Once you are done, click on 'Update'
We need to fire notifications to subscribers. So, let’s create a subscriber!
Create A Subscriber & Update Credentials
A subscriber is essentially the recipient of the notifications sent through Novu’s system. When you create a subscriber, you’re setting up the necessary information for Novu to send targeted notifications to that individual.
You can see the list of subscribers in the Subscribers
section of the Novu dashboard.
Create a subscriber
Grab the FCM device token from your Editor log
Add Device Tokens to Subscriber by Updating Subscriber Credentials
Here, you can locate the Provider_Identifier.
Update the Subscriber Credentials by adding the device tokens to the subscriber
Sending a Push Notification to a Device(Android/iOS) with Novu
To send a notification with Novu, you are actually triggering a notification workflow. You have the ability to test the trigger using the Novu UI or by calling Novu’s API.
Trigger a workflow via the API
Insert the trigger identifier
as the name in the API request below:
Trigger a workflow via the Novu Dashboard
Add Push title and content
Trigger Workflow
Receive Triggered Push Workflow on Device
Push Notification Received on the Device
Dynamic Content
When we were creating the first workflow, we “Hardcoded” the content of the notification.
Now, we will determine the content when calling the API.
- In the workflow, we should change the values of the
title
and thebody
to{{title}}
and{{body}}
. That way, we could insert values through the payload of the API call.
- Add a
payload
object to the API call.
Insert the trigger identifier
as the name in the API request below:
Push Notification received on device from Novu via FCM
Handling Data Type Messages
With FCM, you can send Notification
and Data
messages. We have handled sending notification messages. Let’s handle data messages.
Data messages contain user-defined custom key-value pairs. The information is encapsulated in the data
key. The app can do whatever it pleases with the data once it’s received by the device.
Via the Trigger API call
Push & Data Notification received on device in the foreground from Novu via FCM
Sound of a notification
You can use the name of a sound file in your app’s main bundle or in the Library/Sounds folder of your app’s container directory.
Specify the string “default” to play the system sound. Use it for regular notifications. For critical alerts, use the sound dictionary instead.
The code below works for iOS devices:
For Android devices, use the following:
Priority for notification
If you omit this header, APNs (iOS) set the notification priority to 10
.
- Specify
10
to send the notification immediately. - Specify
5
to send the notification based on power considerations on the user’s device. - Specify
1
to prioritize the device’s power considerations over all other factors for delivery and prevent awakening the device.
For Android devices, specify high
or normal
for the priority of the notification message.
Sending Push Notification With Image
Up to this point, your notifications have all contained only text. But if you’ve received many notifications, you know that notifications can have rich content, such as images. It’d be great if your notifications showed users a nice image related to their content. Once again, Firebase makes this super simple.
To show an image in push notifications, you’ll need to create a Notification Service Extension. We handled it earlier in this guide during the Apple setup.
For reiteration, follow this guide to ensure it is properly set up for iOS devices.
When making the API call, we should include:
- “mutable-content”: 1 inside the “aps” object.
- ”image” in “fcm_options” object,
- URL address of the image.