🚦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

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

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)