🚦Push Notifications - Firebase (Advanced)

• Bubble.io Plugin

• JavaScript SDK

• Recommendations

We are using Firebase Service to provide a Push Notification functionality.

🧋 Bubble.io Plugin

[Element] Natively - Push Notifications (Firebase)

Initialization:

On initialization, the element will try to get the current notification permission status. (No need to call it on the Page Is Load event)

Element Events:

• Firebase FMC Token Updated - get called when FMC token was updated.

• Firebase APNS Token Updated - get called when APNS token was updated.

• Notification permissions authorized - get called when the user clicks Allow on permission alert.

• Notification permissions denied - get called when the user clicks Decline on permission alert.

• Notification permissions status updated - get called when permission status was updated because of the user's action.

• Topic subscription status - get called when topic subscription status was updated because of the user's action: subscribe/unsubscribe.

Element States:

• Permission Status - Yes or No.

• Firebase FCM Token - FMC token's text value.
• Firebase APNS Token - APNS token's text value
• Topic subscription status - 'SUCCESS' if the 'subscribe' action was successful

• Topic unsubscribe status - 'SUCCESS' if the 'unsubscribe' action was successful

You will need the FMC token value to send a push notification. Take this value on the user's login and store it in a database. (For example, you can add a property to the user named fmc_token)

You will need the APNS token value to send a push notification to iOS device. Take this value on the user's login and store it in a database. (For example, you can add a property to the user named apns_token)

Element Actions:

• Request the user's push notification permission - displays a systems popup with your Notification Permissions Text

• Get the user's Firebase APNS Token - Reload the user's Firebase APNS token

• Get the user's Firebase FCM Token - Reload the user's Firebase FCM token

• Get the user's push notification permission status

• Subscribe to topic

  • Topic ID - the FCM topic name
• Unsubscribe from topic

  • Topic ID - the FCM topic name

How to send Push Notifications with Firebase?

1. Firebase Console - Firebase Console Docs
2. Topic messaging - Firebase Topic Messaging Docs
3. Cloud Messaging REST API

To a topic subscribers

curl -X POST \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
https://fcm.googleapis.com/v1/projects/YOUR_PROJECT_ID/messages:send \
-d '{
"message": {
"notification": {
"title": "Notification to All App Users",
"body": "This is for all users of the app."
},
"data": {
"url": "{YOUR_URL_TO_OPEN_INSIDE_OF_THE_APP}",
},
"topic": "all"
}
}'

To a single user

curl -X POST \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
https://fcm.googleapis.com/v1/projects/YOUR_PROJECT_ID/messages:send \
-d '{
"message": {
"notification": {
"title": "Notification to a Single App Users",
"body": "This is for a single user of the app."
},
"data": {
"url": "{YOUR_URL_TO_OPEN_INSIDE_OF_THE_APP}",
},
"token": "{FCM_TOKEN}"
}
}'

Bubble - Setup example

These steps provide a general guide. You can adapt them to fit the specific needs and logic of your application.

1. Request Push Notification permission whenever you need it.

   
2. Save APNS token to your user model (only for iOS)

   

   
3. Save FCM token to your user model

   

   

🛠 JavaScript SDK

NativelyNotifications

const notifications = new NativelyFirebaseNotifications()
const apns_token_callback = function (resp) {
        console.log(resp.token); // string
};
const token_callback = function (resp) {
        console.log(resp.token); // string
};
const topic = "FCM topic name" // string
const subscribe_callback = function (resp) {
        console.log(resp.status); // string
        console.log(resp.message); // string. error message if any
};  
const unsubscribe_callback = function (resp) {
        console.log(resp.status); // string
        console.log(resp.message); // string. error message if any
};  
const permission_callback = function (resp) {
        console.log(resp.status); // true/false
};
const permission_status_callback = (instance) => (resp) => {
        console.log(resp.status); // true/false
};
notifications.firebase_get_apns_token(apns_token_callback);
notifications.firebase_get_token(token_callback);
notifications.firebase_subscribe_to_topic(topic, token_callback);
notifications.firebase_unsubscribe_from_topic(topic, unsubscribe_callback);
notifications.firebase_has_permission(permission_status_callback);
notifications.firebase_request_permission(permission_callback);

How to set up?

1. Make sure you've prepared your app and Firebase for Push Notifications.
2. call firebase_request_permission (required for both iOS & Android).

3. call firebase_get_apns_token (will return the APNS token for iOS).

4. call firebase_get_token (will return the FCM token).

5. Save FMC token and the APNS token (for iOS) somewhere (for example, save them in the user's fcm_token property and apns_token property).

Recommendations

• Request the user's notification permission. You can do that in any necessary place. For example: show a popup that explains to the user's why your app needs it (so, it can be a better experience when just displaying a system popup)

• Identify a user by using FCM token.

• Check the fcm_token value on each login (It can be changed)