bubblewrap icon indicating copy to clipboard operation
bubblewrap copied to clipboard

Notification icon blurred out in TWA notification with FCM and website url present in it

Open Anil-matcha opened this issue 2 years ago • 2 comments

Describe the bug I am using FCM to send push notifications to my TWA app built with bubblewrap for android. But when I receive the notification, the icon is just a brown circle as seen in image below. Also observe the website url community.vadoo.tv shown in the notification which should not be displayed.

WhatsApp Image 2022-05-13 at 5 25 32 PM

To Reproduce Steps to reproduce the behavior:

  1. Install TWA
  2. Send notification via FCM
  3. Notification is observed as brown circle along with url of website being displayed in notification

Expected behavior The app notification icon should be displayed instead of brown circle and website url should not be displayed

Screenshots Added screenshot above

Smartphone (please complete the following information):

  • Device: POCO M3
  • OS: Android 10

Anil-matcha avatar May 13 '22 12:05 Anil-matcha

This post is old but I think it still can help some people.
The Notification icon is called Small Icon in Android https://developer.android.com/develop/ui/views/notifications#:~:text=Notification%20icons%20appear%20on%20the,take%20actions%20with%20the%20notification.

This icon as to be white. image

In your case, if the icon is displayed as a gray circle that's because:

  1. You provided an invalid icon
  2. You did not specify any icon in the twa-manifest.json. To do it, you have to specify a monochromeIconUrl https://github.com/GoogleChromeLabs/bubblewrap/tree/main/packages/cli

bailletced avatar Apr 18 '23 13:04 bailletced

I'm experiencing the same issue with the notification icon. I've added the URL https://divolt.xyz/assets/icons/monochrome.svg as the monochromeIconUrl. The image was created inside res/drawable-xxx as "ic_notification_icon.png".

In my AndroidManifest.xml, it is referenced as:

<meta-data android:name="android.support.customtabs.trusted.SMALL_ICON" android:resource="@drawable/ic_notification_icon" />

Screenshot_20230512-154123 2023-05-12_15-43

If anyone has any insights or ideas regarding this issue, I would greatly appreciate it. Thank you!

zanderlan-n avatar May 12 '23 18:05 zanderlan-n