最近在使用朋友網(不加鏈接，避免有打廣告的嫌疑)，發現會出現提示“是否允許網站顯示桌面通知？”，如下圖所示：
這種做法，在頁面加載完時直接調用請求，比起開心網的這種提示感覺有些野蠻了。開心網的桌面通知提示如下：
先檢查用戶是否已經允許了本站的桌面通知，在未允許的情況下：點擊后Chrome才出現提示，感覺更人性化一些，起碼這個通知出現是由用戶主動觸發的。
這兩個網站，發現桌面通知主要用於webIM的消息提醒。查了下資料，大概了解和掌握了Chrome桌面通知的。做了如下圖所示的一個Demo：
完整的示例代碼如下：
1: <!DOCTYPE html>
2: <html>
3: <head>
4: <title>Google 桌面通知</title>
5: <meta name="generator" content="editplus" />
6: <meta name="author" content="" />
7: <meta name="keywords" content="" />
8: <meta name="description" content="" />
9: <meta http-equiv='content-type' content='text/html; charset=utf-8' />
10: </head>
11: <body>
12:
13: <button id='btn'>顯示桌面通知</button>
14:
15: <script type='text/javascript'>1:2: document.querySelector("#btn").addEventListener('click', notify, false);3:4: function notify() {5: if (window.webkitNotifications) {6: if (window.webkitNotifications.checkPermission() == 0) {7: var notification_test = window.webkitNotifications.createNotification("http://images.cnblogs.com/cnblogs_com/flyingzl/268702/r_1.jpg", '標題', '內容'+new Date().getTime());8: notification_test.display = function() {}9: notification_test.onerror = function() {}10: notification_test.onclose = function() {}11: notification_test.onclick = function() {this.cancel();}12:13: notification_test.replaceId = 'Meteoric';14:15: notification_test.show();16:17: var tempPopup = window.webkitNotifications.createHTMLNotification(["http://www.baidu.com/", "http://www.soso.com"][Math.random() >= 0.5 ? 0 : 1]);18: tempPopup.replaceId = "Meteoric_cry";19: tempPopup.show();20: } else {21: window.webkitNotifications.requestPermission(notify);22: }23: }24: }</script>
16: </body>
17: </html>
Setp：
1、先判斷當前的瀏覽器是否支持開啟桌面通知 window.webkitNotifications；
2、響應用戶操作，如果用戶之前已經允許本站的桌面通知，則window.webkitNotifications.checkPermission()會返回0；
3、如果用戶之前拒絕或是未允許開啟桌面通知，可使用window.webkitNotifications.requestPermission(callback);再次彈出詢問用戶的提示，否則當用戶之前拒絕過，按鈕點擊了也是不會有響應操作的。
注：在給notification實例對象指定replaceId可防止彈出過多的桌面通知（類似唯一標識，彈出同名的replaceId通知實例時，后面的通知會覆蓋之前的通知）。
但我在查看W3C的文檔時，發現它里面標有一個setReplaceId的方法，可實際上是沒有這個方法，取而代之的是名為“replaceId”的屬性。
具體產品（如webIM）中如果實現的，可以參考這一篇文章：<
HTML5實戰之桌面通知>，如果去開心網查看實現的源碼，可以看到如下的實現：
本文參考鏈接：
1）、<
HTML5實戰之桌面通知>
3）、
html5rocks的實例>>
桌面通知，也可以由用戶在Chrome瀏覽器中自定義：板手 -> 選項 -> 高級選項 –> 通知 (管理例外情況…)。
如有興趣，也可以使用Chrome，直接運行並查看前面Demo的實現效果：