How do i send a image along with FCM-push notification for nativescript?

Question

I use nativescript-vue and this plugin for sending push notifications:

nativescript-plugin-firebase,

How do i send an image along when i send a push notification?

In my nativescript-vue project i receive the notification like this:

  firebase.init({
    showNotificationsWhenInForeground: true,
    onMessageReceivedCallback: async (message) => {
})

How do i show an image in the notification? I have tried with including image: "url" and that dosnt work. I think there is way to show a image in the notification because on the firebase panel there is an option to send along a image.

Answer 1

The firebase notification plugin only acts as a receiver and handler of notifications in this case. If you want to send a remote notification with image, you are going to do that with your notification sender; and in this case on Firebase.

If you just want to quickly send or test a push notification with an image, you can do so by going to Firebase Console > Cloud Messaging.

Then just add your image in the respective field.

Now, in most cases in production you would want to do this progmatically on your backend instead of going to Firebase Console. You can do that by using Firebase FCM SDK.

In our case, we usually do it via API calls something like:

POST https://fcm.googleapis.com/fcm/send

BODY
{
    "to": "/topics/user_{{userId}}",
    "notification" : {
        "body" : "This is a Firebase Cloud Messaging Topic Message!",
        "title" : "FCM Message"
     }
}

Header should include a key "Authorization" with value:
key=<YOUR_FCM_KEY_HERE>

You can get your FCM key by going to Firebase Console > Project Settings (the gear) > Cloud Messaging. You can check this doc for more details on sending.

Lastly, if you really want to handle the notification image via your app (not suggested), you can force so by using a local push notification by force handling the remote push notification and doing a local push notification with your own desired image.