Notification
最后更新于:2022-04-01 23:54:47
## Notification
Notifications API 的通知接口用于向用户配置和显示桌面通知。
语法:
```
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 时相同).
**实例属性**
| 属性 | 描述 |
| :--: | :--: |
| Notification.title | 在构造方法中指定的 title 参数 |
| Notification.dir | 通知的文本显示方向 |
| Notification.lang | 通知的语言 |
| Notification.body | 通知的文本内容 |
| Notification.tag | 通知的 ID |
| Notification.icon | 通知的图标图片的 URL 地址 |
**事件**
| 事件 | 描述 |
| :--: | :--: |
| Notification.onclick | 处理 click 事件的处理 |
| Notification.onshow | 处理 show 事件的处理 |
| Notification.onerror | 处理 error 事件的处理 |
| Notification.onclose | 处理 close 事件的处理 |
### 方法
**静态方法**
`Notification.requestPermission()`
用于当前页面想用户申请显示通知的权限。这个方法只能被用户行为调用(比如:onclick 事件),并且不能被其他的方式调用。
**实例方法**
| 方法 | 描述 |
| :--: | :--: |
| Notification.close() | 用于关闭通知 |
**简单实例**
```
// 申请权限
function requestNotification(title, options) {
// 先检查浏览器是否支持
if (!('Notification' in window)) {
alert('This browser does not support desktop notification');
}
// 检查用户是否同意接受通知
else if (Notification['permission'] === 'granted') {
this.openNotification(title, options);
}
// 否则我们需要向用户获取权限
else if (Notification['permission'] !== 'denied') {
Notification.requestPermission((permission) => {
if (permission === 'granted') {
// 如果用户同意,就可以向他们发送通知
openNotification(title, options);
}
});
}
}
function openNotification(title, options) {
const notification = new Notification(title, options);
notification.onclose = (event) => {
// 当关闭时
}
}
requestNotification('您有一条消息通知', {
body: '来自XX',
requireInteraction: true,
data: {},
icon: 'notification-icon.jpg'
});
```
';