Call Firebase Cloud Messaging from HTML page

Question

I've created an Android app with Firebase messaging. Notifications are working fine from the Firebase console. I want to make it work when I click a button from HTML page. Is this possible?

Answer 1

To send a message to devices via the Firebase Cloud Messaging API, you need to pass in the so-called FCM Server Key.

As its name implies, this key should only be used in trusted environment, such as a server you control, your development machine, or Cloud Functions. The reason for that is that somebody who has the FCM Server Key can send any message they want to any of your users.

So if you embed this key in an untrusted environment (such as your web page), a malicious user can simply copy it, and send messages on your behalf. And your users will have no way to know what message came from you, and what messages came from the malicious users.

---

The typical solution is to implement the sending of messages in a trusted environment, such as in Cloud Functions. That way your (server-side) code can ensure that the sender is authorized to send messages.

For more on this, see:

• Sending notifications between Android devices with Firebase Database and Cloud Messaging; while it's for Android, and uses Node.js, the flow described here is still relevant for all platforms.
• is there anyway to send notification from one device to other device using FCM without Firebase Database?
• How to send one to one message using Firebase Messaging

Answer 2

Finally it is working from the below coding

$.ajax({        
        type : 'POST',
        url : "https://fcm.googleapis.com/fcm/send",
        headers : {
            Authorization : my_key
        },
        contentType : 'application/json',
        dataType: 'json',
        data: JSON.stringify({
            "to": my_token, 
            "notification": {
                "title":"Test",
                "body":"Test"
                }
            }),
        success : function(response) {
            console.log(response);
        },
        error : function(xhr, status, error) {
            console.log(xhr.error);                   
        }
    });