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.
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.
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:
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:
- Navigate to 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.
By default, the Automatically Prompt Users for Permission option is enabled, meaning your app will automatically prompt users requesting for permission to receive push notifications when the app is started. However, this may be disruptive to your user sign-in flow.
If you disable it, you can control when the permission is requested. To do so, you will need to manually Request Permission at the appropriate point in your app. It is recommended to keep this option always enabled.
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:
-
From the Firebase dashboard from your project, navigate to the far left menu. Select Project Settings( ) --> Project Settings.
-
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 and click Save.
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. Trigger Push Notification [Action]
Using this action, you can trigger the push notification when an event occurs in your app. For example, sending the push notification to the post creator when someone comments on a post.
Follow the steps below to add this action to any widget.
-
Select the Widget (e.g., IconButton, Button, etc.) on which you want to add the action.
-
Select Actions from the Properties Panel (the right menu), and click Open. This will open an Action Flow Editor in a new popup window.
-
Click on the + Add Action.
-
On the right side, search and select the Trigger Push Notification action.
-
To set who should receive the push notification, set the Audience to Single Recipient or Multiple Recipient.
- If you want to send a notification to a single user, set it to 'Single Recipient'. For example, sending a notification only to the group creator when someone joins the group.
- If you want to send a notification to multiple users, set it to 'Multiple Recipients'. For example, sending a notification to all group members when someone joins the group.
-
Set the Source of user document reference (e.g., app state variable or Firestore document).
-
Further options are available based on the selected source.
-
To set the specific notification title text, enter the Notification Title.
-
You can set the Notification Text from a variable.
-
Optional: Open the Notification Image section to set the image that you want to appear in the notification.
-
Turn on the Deliver with Sound if you want to send a notification with the user's default sound/vibration.
-
To set which page to open when a user taps the notification, set the Initial Page to the page you would like to open. You can also pass on the parameters if page requests.
-
FAQs
Push notifications not working; Getting cloud function error: PERMISSION_DENIED: Missing or insufficient permissions
If you encounter an error with push notifications, specifically a cloud function failure due to permission issues, it might be related to your Google Cloud organization's settings. Organizations can disable automatic IAM grants for default service accounts, leading to this error.
To fix this issue, manually grant the Editor role to the default service account used by your project. You can do this by visiting the GCP IAM page and assigning the Editor role to the following service account:
- For App Engine (Gen 1):
{firebase-project-id}@appspot.gserviceaccount.com - For Compute Engine (Gen 2):
{project-number}-compute@developer.gserviceaccount.com
Also, ensure that these principals (emails) and their roles are present in the permissions tabs in App Engine Default service account, Default compute service account, and firebase-adminsdk. You can do this by visiting the GCP Service Accounts page, clicking on each service account email, and granting access to these principals in the permissions tab.
Below is a sample image for App Engine Default service account.
