HTML5 Web Notifications 桌面推送小記

目錄

• 簡介
• 常用API
• 手動設置權限

簡介

Web Notifications目前在w3c的協議中已經是“推薦”(REC:Recommendation)階段，除了iE外，各大現代瀏覽器都對這個桌面推送有了基本的支持。這都代表我們現在可以很好的在應用中使用桌面推送的特性。在移動端瀏覽器方面，可能因為平台的權限限制的原因目前只有firefox積極地支持這個屬性。Web Notifications也能很好的工作在web workers中。

常用API

• Notification.permission
  使用 Web Notifications之前要向用戶申請權限，Notification.permission屬性是一個只讀屬性表示當前站點Web Notifications的狀態，它有三個值default、granted和denied，在用戶沒有給予權限時，即站點的默認狀態一般是default，僅在這個狀態時，可以使用Notification.requireInteraction 向用戶申請權限，用戶會在瀏覽器上看到一個 Web Notifications權限的確認框，選擇Notification.permission屬性改變為granted表示用戶允許使用Web Notifications，Notification.permission屬性改變為denied表示用戶禁止使用Web Notifications，並且不可再向用戶申請權限。
  Safari (較舊版)和 Chrome (在 32 版本之前) 還沒有實現 permission 屬性。

• Notification.requestPermission
  向用戶申請權限函數，僅在Notification.permission狀態為default時候生效。其他狀態瀏覽器為了友好的用戶體驗不會再向用戶請求權限，用戶如果想要修改權限需要手動設置權限。
  Notification.requestPermission有兩種寫法：

  • 對於比較新的瀏覽器，使用基於promise的語法

              Notification.requestPermission().then(function(permission) { ... });
    

  • 對於比較舊的瀏覽器，使用回調函數(Safari某些較新版本也需要使用回調函數)

              Notification.requestPermission(callback);
    

• Notification 實例常用屬性

  首先這里是一個簡單的Notification實例：

  var notification = new Notification(title, {
                                          body: '...',
                                          icon: '...',
                                          sound :'...'
                                      });
  

  Notification.title 消息的主題
  
  Notification.icon 消息體的圖標
  
  Notification.body 消息體的內容
  
  Notification.sound 消息體提示的聲音（支持性很低）
  

• Notification 實例相關事件

    Notification.onclick<br>
    Notification.onerror<br>
    Notification.onclose<br>
    Notification.onshow<br>
  

• 一個demo的代碼

 if (window.Notification) {
                
                    var ua = navigator.userAgent.toLowerCase();
                    if (ua.indexOf('safari') != -1) {
                        if (ua.indexOf('chrome') > -1) {
                            // Chrome
                            Notification.requestPermission().then(function(permission) {
                                if (permission == "granted") {
                                    var notification = new Notification('桌面推送', {
                                        body: '這是我的第一條桌面推送',
                                        icon: 'some/icon/url'
                                    });

                                    notification.onclick = function() {

                                        console.log('點擊');
                                        notification.close();
                                    };
                                } else {
                                    Notification.requestPermission();
                                    console.log('沒有權限,用戶拒絕:Notification');
                                }
                            });
                        } else {
                            // Safari
                            Notification.requestPermission(function(permission) {
                                if (permission == "granted") {
                                    var notification = new Notification('桌面推送', {
                                        body: '這是我的第一條桌面推送',
                                        icon: 'some/icon/url'
                                    });

                                    notification.onclick = function() {

                                        console.log('點擊');
                                        notification.close();
                                    };
                                } else {
                                    Notification.requestPermission();
                                    console.log('沒有權限,用戶拒絕:Notification');
                                }
                            })
                        }
                    }

                
            } else {
                console.log('不支持Notification');
            }

手動設置權限

chrome用戶請在 "設置->隱私設置->內容設置－>通知"選擇網站域名點擊允許
其他瀏覽器類似，請自己google