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

费利佩

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

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

来自分类常见问题

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

来自分类Dev

浏览器javascript创建自定义事件

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

PhpStorm浏览器按钮自定义URL

来自分类Dev

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

来自分类Dev

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

来自分类Dev

自定义滚动条跨浏览器

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

Firebase推送通知自定义声音

Related 相关文章

  1. 1

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

  2. 2

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

  3. 3

    浏览器javascript创建自定义事件

  4. 4

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

  5. 5

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

  6. 6

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

  7. 7

    PhpStorm浏览器按钮自定义URL

  8. 8

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

  9. 9

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

  10. 10

    自定义滚动条跨浏览器

  11. 11

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

  12. 12

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

  13. 13

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

  14. 14

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

  15. 15

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

  16. 16

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

  17. 17

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

  18. 18

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

  19. 19

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

  20. 20

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

  21. 21

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

  22. 22

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

  23. 23

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

  24. 24

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

  25. 25

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

  26. 26

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

  27. 27

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

  28. 28

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

  29. 29

    Firebase推送通知自定义声音

热门标签

归档