桌面提醒的介紹
桌面通知功能能夠讓瀏覽器即使是最小化狀態也能將消息通知給用戶。這和WebIM是最為天然的結合。不過，目前支持Desktop Notification功能的瀏覽器只有Chrome5+。 在實際使用的過程中，應該盡量減少通知功能對用戶的干擾，最大程度的減少通知功能的出現，這就需要解決以下幾個問題：
- 1. 收到多條消息時確保只出現一條通知;
- 2. 當用戶處於IM出現的頁面中時(頁面處於Focus狀態)將不出現通知;
- 3. 當用戶使用多Tab開啟多個存在IM的頁面時，只要有一個頁面處於Focus狀態將不出現通知;
- 4. 如何讓用戶點擊通知浮動層即可定位到具體的聊天窗口
- 5.此外，還需要解決一個便利性問題
桌面提醒Notification的API
window.webkitNotifications
- requestPermission 請求通訊許可
- checkPermission 檢查通訊許可
- createNotification 創建通訊
- show 顯示通知
代碼實現
1 <!DOCTYPE HTML> 2 <html> 3 <head 4 <meta charset="gbk"> 5 <title>Creating OS notifications in HTML5</title> 6 </head> 7 <body> 8 <input type="button" value="驗證授權" onclick="init();" /> 9 <input type="button" value="彈出消息" onclick="notify();" /> 10 11 <script type="text/javascript"> 12 const miao = 5; 13 14 function init() { 15 if (window.webkitNotifications) { 16 window.webkitNotifications.requestPermission(); 17 } 18 } 19 20 function notify() { 21 var icon = "logo.png"; 22 var title = "Hello World"; 23 var body = "You Are My World (5秒后自動關閉)"; 24 25 if (window.webkitNotifications) { 26 if (window.webkitNotifications.checkPermission() == 0) { 27 var popup = window.webkitNotifications.createNotification(icon, title, body); 28 popup.ondisplay = function(event) { 29 setTimeout(function() { 30 event.currentTarget.cancel(); 31 }, miao * 1000); 32 } 33 popup.show(); 34 popup.show(); 35 } else { 36 window.webkitNotifications.requestPermission(); 37 return; 38 } 39 } 40 } 41 </script> 42 43 </body> 44 </html>
HTML5開發 桌面提醒功能 Demo html5-desktop-notification.html (只支持 Chrome 瀏覽器)