使用Notifation显示桌面通知

使用Chrome的时候有时我们会收到这样的提示：



之后就可能在右下角弹出类似提示框一样的通知，但是与普通的提示框比如jquery-ui实现的不同的是，这个提示框不属于DOM元素，而是属于桌面系统的元素，不依赖与浏览器的位置，大小，开关而存在。

我们可以在最开始请求Notifation的权限：

if (window.Notification && Notification.permission !== "granted") {
Notification.requestPermission(function (status) {
if (Notification.permission !== status) {
Notification.permission = status;
}
});
}

然后创建一个通知实例

//第二个参数可选，其中icon为左侧图片的url, body为通知的内容
var options = {
icon: "./pic.jpg",
body: "hello, a demo of notifation"
}
//第一个参数为通知标题
var n = new Notification("The title!", options);

效果：



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

兼容性：http://caniuse.com/#feat=notifications 不支持IE