HTML5 桌面通知:Notification API

Notification API 是 HTML5 新增的桌面通知 API,用于向用户显示通知信息。该通知是脱离浏览器的,即使用户没有停留在当前标签页,甚至最小化了浏览器,该通知信息也一样会置顶显示出来。

通知示例

enter image description here

请求权限

在应用可以发送通知之前,用户必须授予应用有权这么做。这是一个常见的要求,当一个 API 至少一次试图与 web 页外部进行交互时,用户不得不专门授予该应用程序有权限提出通知,从而让用户控制允许哪些应用程序或网站显示通知。

  • default 用户还未被询问是否授权,所以通知不会被显示
  • granted 表示之前已经询问过用户,并且用户已经授予了显示通知的权限
  • denied 用户已经明确的拒绝了显示通知的权限

    创建通知

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    Notification.requestPermission().then(function(permission) {
    if(permission === 'granted'){
    console.log('用户允许通知');
    var notification = new Notification("来自开发者的新通知", {
    body: '你有3条新状态,快去查看吧!',
    tag: 'message',
    icon: 'http://blog.gdfengshuo.com/images/avatar.jpg',
    image:'http://blog.gdfengshuo.com/images/avatar.jpg',
    data:{
    url:'https://baidu.com'
    },
    requireInteraction: true
    });
    notification.onclick = function(){
    window.open(notification.data.url,'_blank');
    notification.close();
    }
    }else if(permission === 'denied'){
    console.log('用户拒绝通知');
    }
    });

通知属性

  • body:通知的内容。
  • tag:代表通知的一个识别标签,相同tag时只会打开同一个通知窗口。
  • icon:要在通知中显示的图标的URL。
  • image:要在通知中显示的图像的URL。
  • data:想要和通知关联的任务类型的数据。
  • requireInteraction:通知保持有效不自动关闭,默认为false。

通知事件

一旦通知被创建出来,它会立即被显示出来。为了跟踪通知当前的状态,在 Notification 实例层面上会有4个事件被触发:

  • show
    当通知被显示给用户时触发。
  • click
    当用户点击通知时触发。
  • close
    当通知被关闭时触发。
  • error
    当通知发生错误的时候触发。这通常是因为通知由于某些原因而无法显示。
    这些事件可以通过事件处理跟踪 onshow、onclick、onclose 和 onerror。