1、申請權限
出於安全考慮，要發送桌面消息，需要先申請用戶授權。Notification對象提供了壹個靜態的方法——requestPermission()，它接收壹個回調函數作為參數，並把返回值傳遞給回調函數作為參數：
Notification.requestPermission(function(status){
if(Notification.permission !== status){
Notification.permission = status;
}
});
返回值為字符串，有以下三個值：
default
granted
denied
默認為default，也就是需要詢問，表現和denied壹樣。
2、創建消息
用戶授權以後，就可以通過下面方式創建壹條桌面提醒了：
var n = new Notification(title, options);
options為字典，傳入Notification對象的屬性。
3、包含屬性
Notification對象有如下幾個只讀屬性：
dir(文字方向，經測試都不支持)
lang(語言)
body(消息體)
tag(標簽)
icon(icon地址)
這
幾個屬性都可以在創建消息的時候，作為option傳入Notification構造函數。提壹下tag屬性，在有很多消息的時候，這個屬性就非常有用，
它會用擁有相同tag的最新的消息取代之前的消息，只顯示壹條最新的消息。比如在壹個聊天室系統中，同時和幾個人在聊天的時候，就可以以人名為tag顯示
不同人的最新消息。
4、定義事件
Notification對象有四個事件，分別是
onshow()
onclick()
onclose()
onerror()
分別在消息顯示、被點擊、被關閉和出錯的時候被觸發。下面的例子中完整的展示了這四個事件的使用。通常情況下，只需要處理點擊事件就夠了，比如點擊消息後跳轉到某壹特定的頁面。
舉例說明：
window.addEventListener("load", function(){
if(Notification && Notification.permission !== "granted"){
Notification.requestPermission(function(status){
if(Notification.permission !== status){
Notification.permission = status;
}
});
}
var button = document.getElementsByTagName("button")[0];
button.addEventListener("click", function(){
var t = new Date().toLocaleString();
var options={
dir: "ltr",
lang: "utf-8",
icon: "/static/avatar/m_default.png",
body: "妳好呀，歡迎留言交流呀"
};
if(Notification && Notification.permission === "granted"){
var n = new Notification("HUSTecho: "+ t, options);
n.onshow = function(){
console.log("You got me!");
};
n.onclick = function() {
alert("You clicked me!");
window.location = "/";
};
n.onclose = function(){
console.log("notification closed!");
};
n.onerror = function() {
console.log("An error accured");
}
}else if(Notification && Notification.permission !== "denied") {
Notification.requestPermission(function(status){
if(Notification.permission !== status){
Notification.permission = status;
}
if(status === "granted"){
for(var i = 0; i < 3; i++){
var n = new Notification("Hi! " + i, {
tag: "Beyoung",
icon: "/static/avatar/b_default.png",
body: "妳好呀，我是第" + i +"條消息啦！"
});
}
}
});
}else{
alert("Hi!");
}
});
});