1. 為什么需要HTML5的桌面通知
傳統的桌面通知可以寫一個div放到頁面右下角自動彈出來，並通過輪詢等等其他方式去獲取消息並推送給用戶。這種方式有個弊端就是：當我在使用京東 進行購物的時候，我是不知道人人網有消息推送過來給我的，而必須要等我把當前頁面切到人人網才知道有消息推送了。這種方式的消息推送它是基於頁面存活的， 但是我們需要這么一種策略：無論你在看哪個頁面，只要有消息都應該能推送給我看到，這就是webkitNotification要解決的問題。 Notification生成的消息不依附於某個頁面，僅僅依附於瀏覽器。
2. 一個桌面通知生成的正常流程
我們先來看看一個桌面通知是如何生成的：
- 檢查瀏覽器是否支持Notification
- 檢查瀏覽器的通知權限（是否允許通知）
- 若權限不夠則獲取瀏覽器的通知權限
- 創建消息通知
- 展示消息通知
NOTE: 關於第一點的說明需要做一些說明，Notification目前還沒有標准化，所以目前只支持chrome19+和safari6+；網上有資料顯示Firefox26+也支持，但是我拿我的Firefox27檢測的結果是無法支持。
3. notification api基礎說明及代碼示例
目前notification的實現有兩種：一種是之前草案中的形式：webkitNotifications對象, 另一種就是未來標准化的形式:Notification對象。首先來說一下webkitNotifications所包含的內容：
3.1 webkitNotifications：
3.1.1. 靜態方法
|
1
2
3
4
5
6
|
window.webkitNotifications.checkPermission()
//該方法返回0, 1, 2三個值，0代表PERMISSION_ALLOWED,即’允許’；1代表PERMISSION_NOT_ALLOWED，即不允許；2代表PERMISSION_DENIED，即拒絕
window.webkitNotifications.requestPermission()
//調用該方法將會在瀏覽器的信息欄彈出一個是否允許桌面通知的提醒，該方法只能由用戶主動事件觸發，如click 或 mouse over，也就是說你不能在document.ready里面直接調用該方法。
window.webkitNotifications.createNotification(
'icon-url'
,
'title'
,
'body'
)
//調用該方法將返回一個實例化的webkitNotifications對象
|
PS:調用以上方法都會存在安全異常，也就是當前頁面的permission是否為0。
3.1.2. 實例方法
|
1
2
3
4
|
notificationInstance.show()
//調用該方法將在右下角彈出一個通知窗口
notificationInstance.cancel()
//調用該方法將關閉通知窗口
|
3.2 Notification:
在chrome26+ 終端里面輸入window.Notification並鍵入回車鍵，會發現這東西它也是存在的，根據某些博客的說法，這個Notification會是 webkitNotifications的標准化形態（傳說中的進化），這種方式的實現相對於webkitNotifications的實現更簡潔，更面 向對象一些。 構造函數：
|
1
2
3
4
5
6
7
8
9
10
11
|
Notification(title, options)
//@param {String} title 要顯示的通知標題
//@param {Object} options 備選項參數，鍵值對
//option 結構如下
dictionary NotificationOptions {
NotificationDirection dir =
"auto"
;
DOMString lang =
""
;
DOMString body;
DOMString tag;
DOMString icon;
//在實例化的時候會異步的去獲取
};
|
|
1
2
|
//新建一個Notification實例,並根據permission為'granted'來完成notification的顯示
var
notification =
new
Notification(
'Hello Notification'
,{body:
"I'm an enginneer!"
});
|
3.2.1. 屬性
靜態屬性:
Notification.Permission:
'default' 等同於拒絕 'denied' 意味着用戶不想要通知 'granted' 意味着用戶同意啟用通知
Test:在chrome的地址欄里面輸入http://www.baidu.com, 打開console，並在里面輸入Notification.Permission 默認返回的是'default'.
Notes:該屬性是只讀的不能手動修改
//在百度的首頁打開consoleNotification.Permission ='granted'Notification.Permission//'default'
實例屬性：
以下屬性都需要在Notification實例上才能訪問，為只讀屬性，並且就是通過option來賦值
|
1
2
3
4
5
|
Notification.dir
//
Notification.lang
Notification.Body
//通知的具體內容
Notification.tag
//實例化的notification的id
Notification.icon
//通知的縮略圖
|
3.2.2 方法
靜態方法
Notification.requestPermission() ``` //該方法將會詢問用戶是否允許顯示通知 ``` 該方法不能由頁面自主調用，必須由用戶主動事件觸發，還是以百度的頁面為例，百度的搜索框的id為'kw'：
|
1
2
3
|
//不通過事件觸發直接調用
Notification.requestPermission()
//頁面無反應
|
```Javascript //通過用戶主動事件觸發來調用 document.getElementById('kw').onclick=function(){ Notification.requestPermission(); }; //頁面信息欄會彈出詢問用戶是否允許顯示桌面通知
```
Notes:當用戶同意之后，再次調用該方法則無效，即該方法僅對Notification.Permission不為'granted'的時候起作用
實例方法
|
1
|
Notification.close()
//該方法允許通過代碼控制關掉notification
|
Notes: Notification 沒有實例方法show(),在Notification實例化的時候，瀏覽器就已經自動的去處理notification的顯示過程了。
3.3 代碼示例
以下代碼將展示如何使用webkitNotification和Notification來顯示桌面通知
3.3.1 webkitNotification
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
document.getElementById(
'notifyButton'
).onclick =
function
(){
//判斷瀏覽器是否支持notification
if
(window.webkitNotifications){
//判斷當前頁面是否被允許發出通知
if
(webkitNotifications.checkPermission==0){
var
title =
'Hello HTML5'
;
var
body =
'I will be always here waiting for you!'
;
var
WebkitNotification = webkitNotifications.createNotification(icon_url, title, body);
WebkitNotification.show();
}
else
{
document.getElementById(
'requestbutton'
).onclick =
function
() {
webkitNotifications.requestPermission();
};
}
}
else
alert(
"您的瀏覽器不支持桌面通知特性，請下載谷歌瀏覽器試用該功能"
);
};
|
3.3.2 Notification
|
1
2
3
4
5
6
7
8
9
10
11
|
document.getElementById(
'notifyButton'
).onclick =
function
() {
if
(window.Notification){
if
(Notification.Permission===
'granted'
){
var
notification =
new
Notification(
'Hello Notification'
,{body:
"I hope that all the browser will support this\ function!"
});
}
else
{
document.getElementById(
'requestButton'
).onclick =
function
(){
Notification.requestPermission();
};
};
}
else
alert(
'你的瀏覽器不支持此特性，請下載谷歌瀏覽器試用該功能'
);
};
|
4. 參考文檔
LINKS