How do you change the icon (or I think its called badge) and title color of a notification when using web push?
I have both normal push notifications working from my website, and push notifications from a PWA
I have the following:
const title = data.notification.title || "Something";
const options = {
body: data.notification.body,
icon: '/images/icons/webpush_icon.png',
//iconColor: '#43BDFF', // Can something like this be added?
badge: '/images/icons/webpush_icon2.png'
};
event.waitUntil(self.registration.showNotification(title, options));
When this fires, the notification comes through just fine, and the icon is showing (it is a white shape with a transparent background, so this changes to grey on the notification bar as expected). However, the icon is along with the title is showing as white/grey on the drop-down notification list. Other Apps show the icon and title in a single color.
So, can the color of the notification icon/title be set when sending push notifications from a website? If not, what about from a PWA (this installs using js and a manifest.json)
{
"name": "Name",
"short_name": "Name",
"icons": [
{
"src": "/images/icons/PWA_icon_192_any_outline.png",
"type": "image/png",
"sizes": "192x192",
"purpose": "any"
},
{
"src": "/images/icons/PWA_icon_512.png",
"type": "image/png",
"sizes": "512x512",
"purpose": "any"
},
{
"src": "/images/icons/PWA_icon_192_mask_outline.png",
"type": "image/png",
"sizes": "192x192",
"purpose": "maskable"
},
{
"src": "/images/icons/PWA_icon_192.png",
"type": "image/png",
"sizes": "192x192"
}
],
"start_url": "/",
"display": "standalone",
"scope": "/",
"background_color": "#FFFFFF",
"theme_color": "#43BDFF",
"description": "Description",
"orientation": "portrait-primary",
"gcm_sender_id": "1234********"
}
