HTML5實作Notification API桌面通知功能 _html5教學技巧

為什麼需要HTML5的桌面通知
傳統的桌面通知可以寫一個div放到頁面右下角自動彈出來，並透過輪詢等等其他方式去獲取訊息並推送給用戶。這種方式有個弊端就是：當我在使用京東進行購物的時候，我是不知道人人網有消息推送過來給我的，而必須要等我把當前頁面切到人人網才知道有消息推送了。這種方式的訊息推送它是基於頁面存活的， 但是我們需要這麼一種策略：無論你在看哪個頁面，只要有消息都應該能推送給我看到，這就是webkitNotification要解決的問題。 Notification產生的訊息不依附於某個頁面，僅依附於瀏覽器。
一個桌面通知產生的正常流程
我們先來看看一個桌面通知是如何產生的：
1.檢查瀏覽器是否支援Notification
2.檢查瀏覽器的通知權限（是否允許通知）
3.若權限不夠則取得瀏覽器的通知權限
4.建立訊息通知
5.顯示訊息通知
NOTE :關於第一點的說明需要做一些說明，Notification目前還沒有標準化，所以目前只支持chrome19 和safari6 ；網上有資料顯示Firefox26 也支持，但是我拿我的Firefox27檢測的結果是無法支持。
html5的桌面通知我相信大家並不陌生。常見的有網頁版的微信等應用，需要設定桌面通知功能才可以使用。
用客戶端程式實現這樣的功能並不難。而傳統的網頁版的桌面通知可以寫一個div放到頁面右下角自動彈出來，並透過輪詢等等其他方式去獲取訊息並推送給使用者。這種方式有個弊端就是：當我在使用淘寶進行購物的時候，我是不知道微博有消息推送過來給我的，而必須要等我把當前頁面切到新浪微博才知道有消息推送了。這種方式的訊息推送它是基於頁面存活的， 但是我們需要這麼一種策略：無論你在看哪個頁面，只要有消息都應該能推送給我看到，這就是webkitNotification要解決的問題。
Notification目前還沒有標準化，所以你在w3cschool等網站上是學習不到的。但是目前主流瀏覽器大部分都支援Notification。關於html5的桌面通知效果圖如下：

 
代碼如下：

XML/HTML Code複製內容到剪貼簿

1. html>    
2. html>    
3. head>    
4. meta charset=charset=>
5.      title>html5桌面通知>html5桌面通知
html5桌面通知
6. title>    
7. head>    
body>     input type="button" value="開啟桌面通知"  "showNotice();"
8. >    
script
9. >
    
function showNotice(){    
Notification.requestPermission(function(status){    
//status預設值'default'等同於拒絕 'denied' 表示使用者不要通知 'granted' 表示使用者同意啟用通知    
if("granted" != status)    
14. return;     var notify
 = 
15. new
 Notification("訊息>
16. dir:'auto',    
17. lang:'zh-CN',    
18. tag:'sds',//實例化的notification的id    
19. //icon 支援ico、png、jpg、jpeg格式    
20. icon:'http://www.xttblog.com/icons/favicon.ico',//通知的縮圖    
21. body:'html5桌面通知' //通知的特定內容    
22. });     notify.onclick=
function
23. (){   
24. //如果通知訊息被點擊,通知視窗將會啟動    
25. window.focus();    
26. }    
27. });    
28. }     script
>
29.      body
>
30.      html
>

 

以上內容是小編給大家分享的HTML5實作Notification API桌面通知功能，希望對大家有幫助！ 原文：http://www.xttblog.com/?p=249