html5桌面通知,notification的使用,右下角出現通知框

1先判斷瀏覽器是否支持：window.Notification

2判斷瀏覽器是否開啟提示的權限：Notification.permission === 'granted'（如果不允許則設置為允許：Notification.requestPermission()）

3設置提示的內容：var notification = new Notification('訂單提示', { body: "您有新訂單：" + data + "" });//Notification("標題","內容")

4可以設置其他功能比如消息點擊事件：notification.onclick = function (e) {
                            　　　　　　　　　　　　　　　　　　　　alert("點擊")
                       　　　　　　　　　　　　　　　　　　　　　　 }

例：

if (window.Notification) {
                    if (Notification.permission === 'granted') {
                        var notification = new Notification('標題', { body: "內容可以自己隨便定義" });
                        notification.onclick = function (e) {
                            alert("點擊了我")//可以點擊打開一個網址
                        }
                    } else {
                        Notification.requestPermission();//設置允許通知
                    }
                }

拓展：內容可設置屬性如下：

1. dir : 文字的方向；它的值可以是 auto（自動）, ltr（從左到右）, or rtl（從右到左）
2. lang: 指定通知中所使用的語言。
3. body: 通知中額外顯示的字符串
4. tag: 賦予通知一個ID，以便在必要的時候對通知進行刷新、替換或移除。
5. icon: 一個圖片的URL，將被用於顯示通知的圖標。

 可用事件如下：

• Notification.onclick處理 click 事件的處理。每當用戶點擊通知時被觸發。
• Notification.onshow處理 show 事件的處理。當通知顯示的時候被觸發。
• Notification.onerror處理 error 事件的處理。每當通知遇到錯誤時被觸發。
• Notification.onclose處理 close 事件的處理。當用戶關閉通知時被觸發。

關閉通知的實例方法：

var n = new Notification(theTitle,options);
  setTimeout(n.close.bind(n), 4000);

 

注意：ie不支持，本人是在谷歌和火狐測試成功。

自己開發的時候記錄一下，大神路過的話 請忽略或者指教一下有什么需要注意的點，謝謝。