图标未显示在网络推送通知 Angular 中

Question

我正在使用 Angular 和 NodeJs 开发网络推送通知。在 Nodejs 中，我使用 web-push npm 包，而 Angular 使用服务工作者的 SwPush 类。一切似乎都工作正常，除了从后端通知图标接收推送通知时未显示。

使用 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);
      }
    );

通知功能，用于显示通知：

  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 路由器将通知发送给客户端：

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);
  });
});

这是我现在收到的通知。它总是显示 chrome 图标而不是我提到的图标。

我尝试了一切，但通知图标没有改变，总是显示镀铬图标。我怎样才能解决这个问题？预先感谢。

Answer 1

图标 URL 仅在安全上下文 (HTTPS) 中可用