CODEWITHSUNDEEP
reactjsfirebasefirebase-cloud-messagingprogressive-web-apps
JeffreyM
JeffreyM

Reputation: 407

Firebase Push Notification not showing icon in PWA (ReactJS)

I've created a PWA application with ReactJS. I also implemented Firebase Cloud Messaging for displaying push notifications on devices.

When I install my PWA on my android phone I'm getting the correct push notification.

But I can't find how to send an icon to my notification.

I'm triggering the notification with a ASP.NET Core WebApi (2.2) done by the FirebaseAdmin SDK.

My manifest.json file from PWA looks like correct. (192x192 & 512x512 png for icons) I can install it & it's getting the right app icons.

My code to trigger the notification.

public async Task<ActionResult> Test()
{
    var message = new Message()
    {
        Notification = new Notification()
        {
            Title = "My Title",
            Body = "My Body",
            ImageUrl = "MY IMAGE URL"
        },
        Token = "MY ANDROID APP TOKEN"
    };

    await FirebaseMessaging.DefaultInstance.SendAsync(message);

    return Ok();
}

I can't find a way to add the Icon. (Now it's default gray with the first letter of my app: E)

Also tried the following code but the Android part isn't doing a thing.

var message = new Message()
{
    Android = new AndroidConfig()
    {
        Notification = new AndroidNotification()
        {
            Title = "My Title",
            Body = "My Body",
            ImageUrl = "MY IMAGE",
            Icon = "MY ICON",
            ClickAction = "MY URL"
        }
    },
    Notification = new Notification()
    {
        Title = "My Title",
        Body = "My Body",
        ImageUrl = "MY IMAGE"
    },
    Token = "MY TOKEN"
};

await FirebaseMessaging.DefaultInstance.SendAsync(message);

Icon on Android device. Image is showing when expanding the notification. Icon on Android device

If I use the api provided by Firebase:

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

I can send a notification icon & this is working. How can I get this working with the FirebaseAdmin SDK?

Upvotes: 2

Views: 4401

Answers (1)

JeffreyM
JeffreyM

Reputation: 407

I found the problem...

I'm using the wrong type of "Notification" in my code.

public async Task<ActionResult> Test()
{
    var message = new Message()
    {
        Webpush = new WebpushConfig()
        {
            Notification = new WebpushNotification()
            {
                Title = "My Title",
                Body = "My Body",
                Icon = "MY ICON"
            },
        },
        Token = "MY TOKEN"
    };

    await FirebaseMessaging.DefaultInstance.SendAsync(message);

    return Ok();
}

With WebpushConfig & WebpushNotification, I'm getting exactly what I want.

Upvotes: 5

Related Questions