My notification badge icon is not showing after the PWA is installed to homescreen

Question

I have a mobile website which has the ability to receive push notifications. Some codes on the firebase-messaging-sw.js are as below,

 messaging.setBackgroundMessageHandler(function(payload) {
  console.log('[firebase-messaging-sw.js] Received background message ', payload);
  // Customize notification here
  var notificationTitle = payload.data.title;
  var notificationOptions = {
    body: payload.data.body,
    icon: payload.data.icon,
    data: payload.data.click_action,
    badge: "{icon url}",
    image: payload.data.image,
    tag: payload.data.unique_id
  };


  return self.registration.showNotification(notificationTitle,
    notificationOptions);
});

When I allow notifications on the mobile Chrome, the notifications are showing perfectly, which my custom made badge logo showing on the notification bar. But after I click on "Add to Homescreen", the notification badge icon becomes the default bell-shaped icon. Why is it like that and is there any ways to change it?

Thank you.

Answer 1

This is a known bug in Chrome. They have already fixed it in this commit.

The bugfix is rolling out with Chrome 69 on the 4th of September (tomorrow). You can check the rollout state here: https://www.chromestatus.com/features/schedule