js Notification 通知

notification MDN文档

https://developer.mozilla.org/zh-CN/docs/Web/API/notification

实现一个通知

// 浏览器支持且用户没有禁止浏览器通知的情况下执行
if(window.Notification && Notification.permission !== "denied") {
    
    
    Notification.requestPermission(function(status) {
    
    
        var n = new Notification('通知标题', {
    
     body: '这里是通知内容！' }); 
    });
}

效果

copy以上代码，打开f12验证一下？

Notification对象的属性、方法、实例

Notification.permission

Notification.permission属性，用于读取用户给予的权限，它是一个只读属性，它有三种状态。

• default：用户还没有做出任何许可，因此不会弹出通知。
• granted：用户明确同意接收通知。
• denied：用户明确拒绝接收通知

Notification.requestPermission()

用于当前页面向用户申请显示通知的权限。这个方法只能被用户行为调用（比如：onclick 事件），并且不能被其他的方式调用。

Notification构造函数

Notification对象作为构造函数使用时，用来生成一条通知。

var notification = new Notification(title, options);

Notification构造函数的title属性是必须的，用来指定通知的标题，格式为字符串。options属性是可选的，格式为一个对象，用来设定各种设置。该对象的属性如下：

扫描二维码关注公众号，回复： 14233770 查看本文章

• dir：文字方向，可能的值为auto、ltr（从左到右）和rtl（从右到左），一般是继承浏览器的设置。
• lang：使用的语种，比如en-US、zh-CN。
• body：通知内容，格式为字符串，用来进一步说明通知的目的。。
• tag：通知的ID，格式为字符串。一组相同tag的通知，不会同时显示，只会在用户关闭前一个通知后，在原位置显示。
• icon：图表的URL，用来显示在通知上，默认应该是浏览器图标。
  上面这些属性，都是可读写的。

实例对象的事件

Notification实例会触发以下事件。

• show：通知显示给用户时触发。
• click：用户点击通知时触发。
• close：用户关闭通知时触发。
• error：通知出错时触发（大多数发生在通知无法正确显示时）。

这些事件有对应的onshow、onclick、onclose、onerror方法，用来指定相应的回调函数。addEventListener方法也可以用来为这些事件指定回调函数。

notification.onshow = function() {
    
    
     console.log('Notification shown');
};

环境支持

它只是支持服务器环境下的https网页

且只支持部分浏览器&设备