Notification API(全面)

最新推荐文章于 2024-02-25 09:21:08 发布

@红@旗下的小兵

最新推荐文章于 2024-02-25 09:21:08 发布

阅读量1.6k

点赞数 2

分类专栏： ES5

本文链接：https://blog.csdn.net/qq_42778001/article/details/106390546

版权

ES5 专栏收录该内容

32 篇文章 1 订阅

订阅专栏

定义：

浏览器提供的一个桌面通知的接口，它是浏览器原生的API，挂载在window对象上。

使用：

使用 Notification 来创建一个新通知。

let notification = new Notification(title, options)

参数：

title - 设置显示通知的标题 (必填, 否则会报错！)

options - 可选参数

· dir ：文字的方向（auto 自动、ltr 从左至右、rtl 从右至左）；

· lang ：指定通知所用的语言；

· body：通知额外显示的字符串，也就是正文部分，会在标题下方显示；

image: 预览的大图；

· tag：赋予通知一个ID（唯一的），用于对通知进行刷新、替换或移除（这块对于多个通知有用），默认为空，当tag相同时，重复构造实例。新通知会替换就通知，反之，通知不会替换，而是像盖楼层一样叠加；

· icon：一个图片的URL，用于显示通知图标；

· requireInteraction : true // 是否一直保持有效（是否一直保持通知的显示，默认为false，会自动关闭），设置为true时，必须由用户手动关闭或者调用实例的 notification.close() 方法进行关闭。

· data : 这是一个自定义的属性，里边可以定义一些自己属性

let niotification = new Notification('title', {
    iocn: 'xx',
    body: 'this is test',
    data: {
        url: 'www.baidu.com'
    }
})
notification.addEventListener('click', (e) => {
    window.open(e.target.data.url, '_blank')
})

属性

1、静态属性（通过构造函数Notification来访问）

（1）Notification.permission （只读）

查看一个用于表明当前通知显示授权状态的字符串（这个是浏览器规定的），一共有三种状态：

"denied" ：用户拒绝了通知显示；

"granted" ：用户允许通知显示；

"default" ：相当于一个默认状态，与 "denied" 状态相同，拒绝显示通知, 这个状态是浏览器之前没有设置过通知，在控制台输入Nitification.requsetPermission() 会弹出一个对话框：

我在浏览器控制台打印的授权状态是默认的，之前没有设置过：

2、实例属性

通过实例访问，其实例属性都是挂载在Notification原型上的。

以下截图不完整！

以下6个属性开篇以讲过，不再啰嗦：

共同特点：可在options中设置，只读。

notice.title、notice.dir、notice.lang、notice.body、notice.tag、notice.icon

3、事件处理函数

（1）notice.onclick - 每当用户点击通知是触发

注意：该方法的默认行为是将 焦点移到与该通知相关联的 browsing context 的窗口. 如果你不希望这样, 可以在 event 对象上调用 preventDefault().

（2）notice.onshow - 当通知显示时触发( 过时API )

（3）notice.onerror - 当通知遇到错误时触发( 过时API )

（4）notice.onclose - 关闭通知时触发

let notice = new Notification("title")
notice .onclick = function(e) {
  let e = e || window.event
  e.preventDefault(); // 阻止默认事件
  window.open('http://www.baidu.com', '_blank') // 打开一个新页面
}

也是在原型上：

方法

1、静态属性（通过构造函数Notification来访问）

Notification.requsetPermission( ) - 用于当前页面向用户申请显示通知权限的方法。这个方法只能用户行为调用（如：click事件），不能被其他方式调用！！！

此方法会返回一个Promise对象，所以可以使用await 或 then 方式接收返回结果

Notification.requestPermission()
    .then((r) => {
        console.log(r) // 'denied'、'default'、'granted'
    })

（有三个不同状态的返回结果："denied" ：表名用户点击了禁止显示通知、"granted"：用户点击了允许显示通知、"default"：默认状态，会弹出以下对话框询问。）

注：当用户点击了允许或者禁止，下次将不再弹出下边对话框！点击上边的关闭，下次还是会弹出此对话框。。。

如果用户点击了禁止，以后想获取到通知的话，需要用户自行设置，关于如何开启浏览器授权通知请看下https://blog.csdn.net/qq_42778001/article/details/106450669

2、实例方法

通过实例来调用。

(1) notice.close - 关闭一个以前显示的通知

let notice = new Notification('title')
notice.close()

注：有些浏览器会自动关闭弹出的Notication（通知），但有些不是。例如chrome/opera, 所以我们换需要手动关闭。

function sNotification(title, options) {
    let opt = options
    let n = new Notification(title, opt)
    setTimeout(() => {
        n.close.bind(n) // 这块为了确保close方法绑定在n（实例）上
    }, 5 * 1000)
}

基于Notification封装的桌面消息通知在github上，用着不错的话，给俺来个star。

https://github.com/lvxingchenGit/HTML5-Notification