使用HTML5 Notification实现桌面通知

为什么使用HTML Notification

在HTML5 Notification之前的通知主要有两种。一种是写在标题栏中，使用js不断的更改标题内容达到提醒的作用。另外一种是在网页右下角用div模拟通知栏。两种方法的都有很多局限性，比如如果用户最小化浏览器，就看不到通知了。使用Notification则不会出现这样的问题。下面是一个简单的实例。

Notification兼容情况

【注】Notification目前还未标准化。

使用Notification的流程

1. 检查浏览器是否支持Notification
2. 检查浏览器的通知权限
3. 如果权限不够则申请获取权限
4. 创建消息通知
5. 展示消息通知

Notification API

属性

静态属性

Notification.permission
静态属性，只读，表示是否允许通知，可能的值有3个:granted,denied,default

实例属性

这些属性仅在 Notification 的实例中有效。

• Notification.title 只读 (moz only) 在构造方法中指定的 title 参数。
• Notification.dir 只读 通知的文本显示方向。在构造方法的 options 中指定。
• Notification.lang 只读 通知的语言。在构造方法的 options 中指定。
• Notification.body 只读 通知的文本内容。在构造方法的 options 中指定。
• Notification.tag 只读 通知的 ID。在构造方法的 options 中指定。
• Notification.icon 只读 通知的图标图片的 URL 地址。在构造方法的 options 中指定。

事件处理

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

方法

静态方法

Notification.requestPermission()
静态方法，用于征求用户同意是否启用通知。如果调用会出现下面的窗口：

实例方法

Notification.close()
用于关闭通知。

简单的实例

~function(){
    var btn = document.getElementById('btn')
    btn.onclick = function () {
        notifyMe()
    }

    function notifyMe() {
//    首先检查浏览器是否支持
        if (!('Notification' in window)) {
            alert('浏览器不支持桌面提醒')
        }
        //检查是否允许Notification
        else if (Notification.permission === 'granted') {
            newInfo()
        }
        //如果没有拒绝Notification，就申请用户允许
        else if (Notification.permission !== 'denied') {
            //回调模式
            Notification.requestPermission(function (permission) {
                if (permission === 'granted') {
                    newInfo()
                }
            })
            //promise
            // Notification.requestPermission().then(
            //     newInfo()
            // )

        }
    }

    function newInfo(title, options) {
        title = title || '新的消息'
        options = options || {
                body: '默认消息',
                icon: ‘’
            }
        return new Notification(title, options)
    }
}()

参考
http://caniuse.com
https://developer.mozilla.org/zh-CN/docs/Web/API/notification