hugh 的个人博客

Web Notification使用详解

1. notication Api

用于向用户发送桌面通知,在MAC上会同步到系统通知内

2. 构造方法

let notification = new Notification(title, options)

参数

title
一定会被显示的通知标题
options 可选
一个被允许用来设置通知的对象。它包含以下属性:
  • dir : 文字的方向;它的值可以是 auto(自动)ltr(从左到右), or rtl(从右到左)
  • lang: 指定通知中所使用的语言。这个字符串必须在 BCP 47 language tag 文档中是有效的。
  • body: 通知中额外显示的字符串
  • tag: 赋予通知一个ID,以便在必要的时候对通知进行刷新、替换或移除。
  • icon: 一个图片的URL,将被用于显示通知的图标。

 

属性:

Notification.permission

 - denied (用户拒绝了通知的显示),

  - granted (用户允许了通知的显示), 

  - default (因为不知道用户的选择,所以浏览器的行为与 denied 时相同).

 

事件

 click  点击通知信息时触发

 error 遇到错误时触发

 close 关闭通知时触发

 show 显示通知时触发

 

方法

静态方法  Notification.requestPermission()  

   用于向用户请求显示通知的权限, 具备一个回调, 获取到用户选择的授权。 只有在触发用户行为时才能被调用(如果onclick)

实例方法:

notification.close() 关闭通知

 

3. 使用流程

1. 选择触发时机

2. 调用静态属性查询是否有权限, 如果没有权限,调用静态方法申请权限

3. 获得权限后初始化Notication实例

4. 如果需要监听相关事件, 在实例上进行绑定

案例

4. 如果收到点击了拒绝, 如果再次开启通知

以chrome为例,打开设置, 在允许一项中添加即可

 

 


标题:Web Notification使用详解
作者:hugh0524
地址:https://blog.uproject.cn/articles/2019/03/06/1551862945596.html