Icon not showing in web push notification Angular

Viewed 2135

I am working on web push notification using Angular and NodeJs. In Nodejs i'm using web-push npm package and Angular using SwPush class from service worker. Everything seems working fine except while receiving push notification from back end notification icon not showing.

Receiving notification using swpush:

swPush.messages.subscribe(
      (notification: any) => {
        console.log("received push message", notification);

        let options = {
          body: notification.body,
          icon: "http://localhost:3000/assets/img/logo.png",
          badge: "http://localhost:3000/assets/img/logo.png",
          image:"http://localhost:3000/assets/img/logo.png",
          actions: <any>notification.actions,
          data: notification.data,
          vibrate: [100, 50, 10, 20, 20],
        };
        this.showNotificationss(notification.title, options)
      },

      err => {
        console.error(err);
      }
    );

Notification function which is used to show the notification:

  showNotificationss(title: string, options: NotificationOptions) {
    navigator.serviceWorker.getRegistration().then(reg => {
      reg.showNotification(title, options).then(res => {
        console.log("showed notification", res)
      }, err => {
        console.error(err)
      });
    });
    }

NodeJs router to sent the notification to client:

app.post('/subscribe', (req, res) => {
  const subscription = req.body;
  res.status(201).json({});
  const payload = JSON.stringify({ title: 'test',  icon: "http://localhost:3000/assets/img/logo.png",
          badge: "http://localhost:3000/assets/img/logo.png", });
  webpush.sendNotification(subscription, payload).catch(error => {
    console.error(error.stack);
  });
});

This is the notification which is now i'm getting. It will always showing chrome icon instead of icon which i was mentioning.

enter image description here

I tried everything but notification icon not changed always showing chrome icon. How can i fix this? thanks in advance.

0 Answers
Related