Push Notifications
Push notifications allow you to send timely and relevant information to a user's phone. From this page, you can enable the push notification feature in your app. After enabling it, you can send the push notification instantly or schedule it to be delivered to the user's device at a specific time.
FlutterFlow uses Firebase Cloud Messaging (A Firebase product) to send push notifications.
General Prerequisites
Before getting started with this section, ensure you have:
Completed all steps in the Firebase Setup.
Upgraded to a Blaze plan for your Firebase project.
iOS Prerequisites
These steps are mandatory if you want to send push notifications to iOS devices:
Created an Apple account.
Purchased an Apple Developer membership. Please see this link for more details on the Apple Developer program and how to sign up.
Add push notifications
Here are the steps to send push notifications:
1. Enabling push notification
Please note, push notifications will not work in these scenarios:
Push notifications will not work on an iOS simulator. To test you will need to use a real device.
Push notifications will not be delivered to users who are logged out of your app. To send push notifications to users who are not logged in, consider implementing anonymous Firebase login within your app
Push notifications will not work if you have the app open on your device.
To enable push notifications:
Click on the Settings and Integrations -> App Settings -> Push Notifications and Enable Push Notifications.
Now, click on the Deploy button. This will create and deploy the Cloud Functions in your Firebase project that are necessary for push notifications to work.
2. Only for iOS: Configuring iOS app
To receive the push notifications in an iOS app, you need to perform the following additional steps.
1. Creating a key
Apple requires developers to create a key for the push notifications inside the Apple Developer Console to verify the push notification's sender.
To create a key:
From your Apple developer account, open the keys section.
Click on the (+) button on the right side of the Keys label.
Enter the Key Name.
Select the Apple Push Notifications service (APNs) from the list below.
Click on Continue and then Register.
Click Download and save the file. It will be needed to add to your Firebase project.
2. Add APNs key to Firebase project
To add APNs key to Firebase project:
Select the Cloud Messaging tab.
Scroll down and find your iOS app under the Apple app configuration section.
Under the APNs Authentication Key section, click on Upload. A popup will appear to upload and enter the key details.
Click on the Browse button to locate and upload the APNs auth key file.
Enter the Key ID. You can find your Key ID in the Apple Developer Center under Certificates, Identifiers & Profiles -> Keys -> Click on Key.
Enter the Team ID. You can find your Team ID in the Apple Member Center under the membership tab.
3. Adding identifier
You must add an Identifier to be able to send the push notifications to the iOS devices after you deploy your app to the app store.
To add an Identifier:
From your Apple developer account open the Identifiers section.
Click on the (+) button on the right side of the Identifiers label.
Select the App IDs and click Continue.
Select the Type App and click Continue.
Enter the Description as ImageNotification.
Enter the Bundle ID as your package name and add .ImageNotification in the end.
Click Continue and then click Register.
4. Enable push notifications in your App ID
Continue with this step only if you have an APP or Bundle ID created in your developer account.
Add the 'Push Notifications' capability to your existing App ID in order to avoid any issues when you re-deploy your app. Here's how you do it:
From your Apple developer account, open the Identifiers section.
Open the identifier with your existing APP ID.
Select Push Notifications from the list.
Click Save.
3. Sending push notifications
Use these steps to create and send push notifications:
Click on the Settings and Integrations -> App Settings -> Push Notifications.
Find the Manually Trigger Notifications section and click on it to expand the section.
In the Notification Title, enter the text that you want to set as a title for notification.
In the Notification Text, enter the content of your notification.
Optional: Click on the Upload Notification Image to set the image that you want to appear in the notification.
Find the Target Audience dropdown. Keep the All option selected if you want to send notifications to both Android and iOS users. You can select Android or iOS if you wish to target OS-specific users.
Enable Deliver With Sound if you wish to.
If you have more than 10K users, you might want to enable the Batch Notifications.
To send push notifications to a specific or few users, enter the user document reference (from the 'users' collection in Firestore) into the User References.
Find the Initial Page dropdown and select a page that you would like to open when a user clicks on the notification.
Click on Send Notification.
To confirm you want to send this notification, a popup will appear. You need to enter the text 'Send Notification' and click on Send Notification again.
Push notifications with data
Sometimes you might want to include additional data with your push notifications, which can then be used to display more detailed information on the page when it's opened through a push notification.
For instance, consider a news app that sends push notifications for breaking news. When the user taps the notification, the additional data could include the news article's title, summary, and image.
Currently we only support sending Firestore document references as data.
To send a push notification with data:
You must have a page that accepts a parameter of type 'DocumentReference'.
Build a notification using the instructions here.
Set the Initial Page to the one that accepts the parameter.
Find the Parameter Data section, copy the document reference from the Firestore, and paste it into the input box below.
Click on Send Notification.
Trigger push notification
You might want to send a push notification when something happens in your app. For example, sending a push notification on a message sent, a push notification on a new appointment booked, a push notification on a price change, etc.
You can send the push notification on such event occurrence by adding the Trigger Push Notification action.
For demonstration purposes, consider an example of sending a push notification to a post creator when someone comments on a post.
Here are the steps:
1. Retrieve the document reference of the user
The document reference of the user is required to send a push notification to a specific user, in this case, it would be the document reference of the post creator.
Normally, you would obtain the user document reference from the Firestore document, where a field like 'created_by' stores the document reference of the post creator. However, for the sake of simplicity, let's assume that we are storing this reference in an app state variable, which looks like this:
If you need to send push notifications to multiple users, consider a scenario where you want to notify all users who liked a post when someone comments on it. You can retrieve the list or array of user document references from the Firestore document or any app state variable within your app. Here's what a list of document references in an app state variable might look like:
Learn more about working with app state variables.
2. Adding the trigger push notification action
Once you figure out how to access the receiver's document reference, you can add the following action.
pageTrigger Push Notification ActionFAQs
Last Updated Date: April 9, 2024
Last updated
