H5 端唤醒 win10 消息通知

浏览器也可以调用Win10系统的消息提示

按 F12（开发调试工具），Console下粘贴以下代码

if (window.Notification) {
    /* 授权过通知 */
    if (Notification.permission === 'granted') {
        const notification = new Notification('你好', {
            icon: 'https://www.qiudb.top/img/nurse.png',
            body: '欢迎访问Qiu博客~~~'
        })
        notification.onclick = function () {
            window.open('https://www.qiudb.top/')
            notification.close()
        }
        //5秒后自动关闭
        setTimeout(notification.close.bind(notification), 5000);
    } else {
        /* 未授权，先询问授权 */
        Notification.requestPermission();//设置允许通知
    }
}

预览图

• granted : 用户允许了通知
• denied : 用户拒绝了通知 （这种情况下不应该再弹出来）
• default : 用户还没有选择过

经过允许之后就可以发起创建Notification实例发送通知

//title就是通知的标题，options是通知的内容设置
let notification = new Notification(title, options) 

options中的有很多选项，可以直接看文档

• body: 通知的主体内容
• icon: 显示时通知的图片
• url: 显示网站的地址
• requireInteraction: boolean类型控制是否不自动关闭，true时不自动关闭，false时手动关闭或点击的时候才会关闭
• tag: 相当于通知的id，如果你不写，每条通知都是独立了，如果有需要重复覆盖的通知，只要使用相同的tag就行了

最后notification还有提供了一些事件

• Notification.onclick
  处理 click 事件的处理。每当用户点击通知时被触发。
• Notification.onshow
  处理 show 事件的处理。当通知显示的时候被触发。
• Notification.onerror
  处理 error 事件的处理。每当通知遇到错误时被触发。
• Notification.onclose
  处理 close 事件的处理。当用户关闭通知时被触发。

原文链接：https://www.qiudb.top/archives/56/