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

Question

我正在使用 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;
      }
    }
  }

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

注意:我没有使用 Toastr 通知的原因是因为我希望即使浏览器最小化或在另一个应用程序后面，用户也能收到我的通知。

注意 2:这是我使用的通知类型的示例:https://tests.peter.sh/notification-generator/ .

Answer 1

我相信您尝试做的事情是不可能的，至少 according to the spec .没有用于传递/设置视觉呈现的属性或方法。

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

不过，将来可能会增加这种风格上的灵 active 。我只是不这么认为。