Firebase Notification - Legacy method

Currently, AppGyver supports notifications for Android and iOS devices but not for web apps. This might be changed by the time you read this blog. I will be using an Android device to do the demo using Firebase Cloud Notifications. For iOS devices, there are some prerequisites to be met, other than that, the API logic is the same for both.

Getting Started

• Log on to Firebase and create the project for which you need to send notifications.

• Click on project setting.

• Under the Cloud Messaging tab, you can see methods enabled for sending notifications in this project.

• As we are going to use the legacy method, go to Manage API in the Google console by clicking on the three dots.

• It will take a few seconds to get enabled once you click on the Enable button.

• Refresh the project settings page to see the methods enabled.

• Create a new project in AppGyver, maintain all the Firebase project details and initialize it.

• Go ahead to the SAP AppGyver preview and open your application once and close it.

Notifications will not be displayed when the application is running in the foreground. This might be updated by the time you read this post. Do not share or display the device token or server key in app pages. Try to put all the details in the Firebase database.

Sending notifications to everyone who has the application on their device

• Go to Firebase project overview and click on cloud messaging under build.

• On the cloud messaging page, click on Send your first message.

On the Compose notification page, fill in the sample details and review the notification to send it to your device. Suppose if this is your first time, you can provide the following details.

• In the notification step, mention the title, test and image needs to be displayed and click on Next.

• In target, select the app for which you need to send a notification. In this case, select Android or iOS and click next.

• In scheduling, you can scheduled the set time when the notification needs to be sent to the user. For now, I will trigger it immediately maintaining Now in the field.

• Steps 4 and 5 are not in our scope for this post. So, go ahead, click on Review and Publish it.

• You will see the notification on your device within a few seconds.

Sending Notification to a particular user device.

In order to send mail or item to a particular location, we need to have some kind of specific address. The same thing is happening here also. Each device will have a unique address in terms of a token, which is used to send notifications to that particular device.

• To get this token for our device, we are making use of the Get Firebase Device Token (beta) from the flow function marketplace.

• I have created a new application in Appgyver and modified the default text components to display the Firebase token fetched from the Get Firebase device token flow when the page is mounted just for this post.

• Now if you see the preview of this application, there won't be any token generated. For that, we need to download the build file and install it.

• After installing the application, you will be able to see the token getting generated.

• Go to the compose notification page in Firebase projects. Enter the notification details and click on Send test message.

• In the popup, add your device token and click on test.

• Within a few seconds, you will receive the notification on your device.

Now that you have tested, simply head over to AppGyver and perform this action using an HTTP request.

API endpoint: https://fcm.googleapis.com/fcm/send

Request Type: POST

Headers:

Header	Value
Authorization	key=<service key in cloud messaging tab of project settings>
Content-Type	application/json

Body

{
    "to": "<Device Token>",
    "notification": {
        "sound": "default",
        "body": "Sending Notification to everyone who has the application on their device",
        "content_available": true,
        "title": "Test Notification",
        "image": "https://images.unsplash.com/photo-1577720086808-ee62b140bc0e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=605&q=80"
    }
}

• Also, provide an appropriate toast to learn the flow logic's output.

• Because my mobile device has a different token, I can test this using the Web app preview.

Sending Notification to all devices belongs to same user or multiple user devices

The same user can login using the same credentials on multiple devices. In this case, we need to send notifications to all the devices. So in order to achieve this, we need to send all the devices tokens in the body with different key field.

{
    "registration_ids": ["token1","token2"],
    "notification": {
        "sound": "default",
        "body": "Sending Notification to everyone who has the application on their device",
        "content_available": true,
        "title": "Test Notification",
        "image": "https://images.unsplash.com/photo-1577720086808-ee62b140bc0e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=605&q=80"
    }
}

Sending notification using topic

You can send notification to a topic and whomever wants to listen to it can subscribe or unsubscribe the topic. So in this case we don't need to get the device token and store it in our database FCM takes care of storing the devices and routing the notification send to the respective topic.

Subscribing to a topic

API Endpoint: https://iid.googleapis.com/iid/v1:batchAdd

Request Type: POST

Headers:

Header	Value
Authorization	key=<service key in cloud messaging tab of project settings>
Content-Type	application/json

Body

{
    "to": "/topics/<Your topic name>",
    "registration_tokens" : [<device token1>,<device token2>,...]
}

Unsubscribing to a topic

API Endpoint: https://iid.googleapis.com/iid/v1:batchRemove

Request Type: POST

Headers:

Header	Value
Authorization	key=<service key in cloud messaging tab of project settings>
Content-Type	application/json

Body

{
    "to": "/topics/<Your topic name>",
    "registration_tokens" : [<device token1>,<device token2>,...]
}

Note: /topics/ is mandatory to be passed. The result of the payload will be an empty object only.

To send notifications to topics, we need to pass topics instead of passing device tokens in the body.

{
    "to": "/topics/wallpaper",
    "notification": {
        "sound": "default",
        "body": "Sending Notification to wallpaper subscription",
        "content_available": true,
        "title": "Test Notification",
        "image": "https://images.unsplash.com/photo-1652961989677-a236d38f63f6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80"
    }
}

Suggestions and feedback are much appreciated. It encourages me to improve and share more content based on my experience with no code tools. If you have any doubts or queries, drop them in the comment section.