🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
## 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' }); ```