bubblewrap
bubblewrap copied to clipboard
Notification icon blurred out in TWA notification with FCM and website url present in it
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.
To Reproduce Steps to reproduce the behavior:
- Install TWA
- Send notification via FCM
- 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
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.
In your case, if the icon is displayed as a gray circle that's because:
- You provided an invalid icon
- You did not specify any icon in the
twa-manifest.json
. To do it, you have to specify amonochromeIconUrl
https://github.com/GoogleChromeLabs/bubblewrap/tree/main/packages/cli
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" />
If anyone has any insights or ideas regarding this issue, I would greatly appreciate it. Thank you!