H5 Web Notification桌面推送消息

H5 Web Notification桌面推送消息

由于这两天公司项目刚好做到一个需要实时桌面推送的功能，就像平时QQ，微信消息推送那种，这个时候我们就可以用到HTML5 Web Notification 这个API了。

Notification.requestPermission(function (permission) {  
    if (permission == "granted") {
        var notification = new Notification("您有一条新的消息",{  
            dir: "auto",  
            lang: "zh-CN",  
            tag: "testNotice",  
            icon:'ant.png',  
            body: '你好啊！我是蚂蚁，我在测试桌面推送' 
                    });   
    }
}

该API伴随服务器操作，打开浏览器，运行localhost，会出现一个弹窗：
（注意：如果这段代码放在html中执行，一定要创建虚拟服务器，即用域名访问，如：localhost，不能直接用file:index.html 这样的路径访问，因为这个不是http协议，浏览器不接受本地文件的通知设置。）

---

如果之前没有为该域名请求权限，则不会有弹窗。选择【允许】，则可以进行桌面推送：
在Mac上，推送的消息一般都会在屏幕右上角弹出（这里举例谷歌浏览器，不同浏览器弹出方式不同，有兴趣的可以自己去试试）

---

在window系统，一般会在右下角弹出推送消息

---

Notification.permission这是一个静态属性，有3个值，default, granted, denied

• default表示还没有发出过请求，或者之前请求过，但是用户并没有允许或者禁止，二是直接关闭窗口。这种状态下是不会有通知的。
• granted表示之前向用户请求过权限，而且用户已经允许了。
• denied表示之前向用户请求过权限，但是用户已经拒绝了。

---

new Notification(title, options)，其中title是必须参数，表示推送消息框的标题内容，options是可选参数，下面是一些参数的简单说明(一些常用的，其他的有兴趣的可以自己去了解)

lang：提示的语言

bady：提示消息的主体内容

tag：标记当前通知的标签

icon：左边的显示头像或者图标

renotify：是否替换之前的通知项

---

事件句柄

Notification.onclick

处理 click 事件的处理。每当用户点击通知时被触发。

Notification.onshow

处理 show 事件的处理。当通知显示的时候被触发。

Notification.onerror

处理 error 事件的处理。每当通知遇到错误时被触发。

Notification.onclose

处理 close 事件的处理。当用户关闭通知时被触发。

---

最后就是该API的兼容性啦，IE就直接被抛弃了

我这里仅仅介绍一些简单的操作，想了解更多的，可以去网上搜资料，有新的发现希望能一起共享。