HTML5 桌面通知：Notification

Notification介绍 Notification API 是HTML5新增的桌面通知API，用来显示桌面通知消息。 浏览器权限 通过window.Notification来判断浏览器是否兼容Notification API if (window.Notification) { // 判断浏览器是否兼容Notification } 用户权限 要想向用户显示通知消息，就要通过浏览器获取用户权限，主要通过Notification.permission来判断。 Notification.permission包括的值: default ：默认。 granted ：显示通知的权限。 denied ：用户拒绝。 let permission = Notification.permission; // 显示通知的权限 if (permission == "granted") { } else if (permission == "denied") { // 不同意，发不了咯 } else { // 其他状态，可以重新发送授权提示 Notification.requestPermission(); } 推送通知 获取用户通知后，就可以进行推送消息啦！！ var notification = new Notification(title, options) 参数如下: title：显示的通知标题 options:通知的设置选项（可选） dir : 文字的方向,它的值可以是 auto（自动）, ltr（从左到右）, or rtl（从右到左）。 body:通知的内容。 icon：要在通知中显示的图标的URL。 requireInteraction：通知保持有效不自动关闭，默认为false。(测试了下这个参数好像没有效果) 还有一些其他的参数，因为没有用到这里就不一一列举啦。 var notification = new Notification(item.name, { dir: 'rtl', body: "这个是内容哦！", icon: icon, requireInteraction:false, }) 通知消息的效果图如下： image 通知事件 Notification接口的 onclick属性指定一个事件侦听器来接收click事件。 notification.onclick = function() { // window.focus 可以定位到有消息的窗口 window.focus(); // 关闭通知 notification.close(); }; 兼容:目前测试了PC端的，发现window 7 的IE浏览器还不支持，其他各浏览器通知消息如果为默认的话也会有不一样的差异。

本文章由javascript技术分享原创和收集