Css 如何自定义浏览器推送通知的样式

我正在使用Angular 4创建一个应用程序，它应该会不时收到推送通知。我已经设法使通知出现，但我无法自定义其样式和内容

我正在寻找的是一种改变通知背景颜色的方法，这样我就可以让它们闪烁以引起用户的注意

这是我的密码：

  public showNotification(title: string, text: string): Notification {
    // Check if notifications are supported
    const notificationOptions = {
      body: `<div style="color:red"><p>${text}</p></div>`,
      icon: 'assets/img/logo_onyo-simples.png',
      badge: 'assets/img/logo_onyo-simples.png',
      vibrate: [200, 100, 200]
    };

    try {

      // Throws an exception if the browser doesn't support a notification.
      const notification = new Notification(title, notificationOptions);
      notification.onclick = (e: any) => {
        window.focus();
        notification.close();
      };

      return notification;
    }
    catch (e) {
      if (e.name === 'TypeError') {
        this.raven.captureBreadcrum({
          message: 'This browser does not support notifications',
          level: 'warning',
          category: 'notification'
        });
      }
      else {
        this.raven.captureException(e);
        throw e;
      }
    }
  }

publicshowNotification（标题：string，文本：string）：通知{
//检查是否支持通知
const notificationOptions={
正文：`${text}
`，
图标：“assets/img/logo_onyo-simples.png”，
徽章：“assets/img/logo_onyo-simples.png”，
振动：[200100200]
};
试一试{
//如果浏览器不支持通知，则引发异常。
const notification=新通知（标题、通知选项）；
notification.onclick=（e:any）=>{
window.focus（）；
通知。关闭（）；
};
退货通知；
}
捕获（e）{
如果（e.name=='TypeError'）{
这是raven captureBreadcrum({
消息：“此浏览器不支持通知”，
级别：“警告”，
类别：“通知”
});
}
否则{
此.raven.captureException（e）；
投掷e；
}
}
}

我尝试向通知正文添加一个测试HTML标记，但没有成功。有办法做到这一点吗

注意：我不使用Toastr通知的原因是，我希望用户接收我的通知，即使浏览器最小化或位于另一个应用程序后面

---

注2：下面是我正在使用的通知类型的一个示例：。

我认为您试图做的事情至少是不可能的。没有用于传递/设置视觉呈现的属性或方法

我在这里猜测，但这可能是因为浏览器供应商想要阻止您试图创建的行为类型。也许你可以设计一个具有良好品味和设计的通知。然而，这也会为人们创造糟糕、恼人和直接的掠夺性通知打开大门。它将打开黑暗模式的大门

---

尽管如此，这种风格的灵活性在未来还是有可能增加的。我只是不这么认为。

我相信你想做的事至少是不可能的。没有用于传递/设置视觉呈现的属性或方法

我在这里猜测，但这可能是因为浏览器供应商想要阻止您试图创建的行为类型。也许你可以设计一个具有良好品味和设计的通知。然而，这也会为人们创造糟糕、恼人和直接的掠夺性通知打开大门。它将打开黑暗模式的大门

尽管如此，这种风格的灵活性在未来还是有可能增加的。我只是不这么认为