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

费利佩

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

塞尔格·切尔纳塔

我相信您尝试做的事情是不可能的,至少根据规范没有用于传递/设置视觉呈现的属性或方法。

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

虽然,将来可能会添加这种风格的灵活性。我只是不这么认为。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类常见问题

跨浏览器自定义样式的文件上传按钮

来自分类Dev

DalekJS:使用自定义标志启动浏览器

来自分类Dev

如何检测浏览器是否支持自定义元素

来自分类Dev

如何在移动浏览器的屏幕顶部显示自定义警报?

来自分类Dev

浏览器提供的自定义/替代错误消息?

来自分类Dev

如何自定义百度推送通知?

来自分类Dev

如何配置Neo4j浏览器以使用自定义REST端点?

来自分类Dev

在浏览器中调试自定义DOM事件

来自分类Dev

如何将自定义搜索引擎添加到浏览器?

来自分类Dev

如何显示GCM推送通知的自定义UI?

来自分类Dev

如何在所有浏览器上正确导入自定义字体

来自分类Dev

浏览器javascript创建自定义事件

来自分类Dev

Firebase推送通知自定义声音

来自分类Dev

PhpStorm浏览器按钮自定义URL

来自分类Dev

如何为运行简单的Web浏览器构建自定义发行版?

来自分类Dev

如何在带有自定义目录的浏览器中运行.erb文件?

来自分类Dev

检测浏览器关闭事件时如何显示自定义弹出窗口?

来自分类Dev

如何在Ubuntu中添加书签的自定义图标。谷歌浏览器?

来自分类Dev

rss进入自定义浏览器活动,而不是普通浏览器

来自分类Dev

如何通过Windows Phone 8的网络浏览器传递自定义标头?

来自分类Dev

从浏览器启动自定义应用程序

来自分类Dev

如何阻止自定义书签打开多个浏览器选项卡

来自分类Dev

如何自定义百度推送通知?

来自分类Dev

如何显示GCM推送通知的自定义UI?

来自分类Dev

如何在所有浏览器上正确导入自定义字体

来自分类Dev

自定义Python IDLE:如何获取标签页和文件浏览器?

来自分类Dev

如何自定义浏览器 webpush 通知正文和图标?

来自分类Dev

结合参数的自定义浏览器协议

来自分类Dev

自定义滚动条跨浏览器

Related 相关文章

  1. 1

    跨浏览器自定义样式的文件上传按钮

  2. 2

    DalekJS:使用自定义标志启动浏览器

  3. 3

    如何检测浏览器是否支持自定义元素

  4. 4

    如何在移动浏览器的屏幕顶部显示自定义警报?

  5. 5

    浏览器提供的自定义/替代错误消息?

  6. 6

    如何自定义百度推送通知?

  7. 7

    如何配置Neo4j浏览器以使用自定义REST端点?

  8. 8

    在浏览器中调试自定义DOM事件

  9. 9

    如何将自定义搜索引擎添加到浏览器?

  10. 10

    如何显示GCM推送通知的自定义UI?

  11. 11

    如何在所有浏览器上正确导入自定义字体

  12. 12

    浏览器javascript创建自定义事件

  13. 13

    Firebase推送通知自定义声音

  14. 14

    PhpStorm浏览器按钮自定义URL

  15. 15

    如何为运行简单的Web浏览器构建自定义发行版?

  16. 16

    如何在带有自定义目录的浏览器中运行.erb文件?

  17. 17

    检测浏览器关闭事件时如何显示自定义弹出窗口?

  18. 18

    如何在Ubuntu中添加书签的自定义图标。谷歌浏览器?

  19. 19

    rss进入自定义浏览器活动,而不是普通浏览器

  20. 20

    如何通过Windows Phone 8的网络浏览器传递自定义标头?

  21. 21

    从浏览器启动自定义应用程序

  22. 22

    如何阻止自定义书签打开多个浏览器选项卡

  23. 23

    如何自定义百度推送通知?

  24. 24

    如何显示GCM推送通知的自定义UI?

  25. 25

    如何在所有浏览器上正确导入自定义字体

  26. 26

    自定义Python IDLE:如何获取标签页和文件浏览器?

  27. 27

    如何自定义浏览器 webpush 通知正文和图标?

  28. 28

    结合参数的自定义浏览器协议

  29. 29

    自定义滚动条跨浏览器

热门标签

归档