HTML5學習筆記（一）：桌面提醒

HTML5中的桌面提醒（web notifications）能夠讓用戶得到實時的消息提醒，在網頁多窗口聊天的時候，這一功能將極大的方便用戶。例如新浪微博私信聊天時候的消息提醒功能。這里只考慮瀏覽器原生的功能，對於那些通過插件來實現的桌面提醒功能不做考慮（如360安全瀏覽器）。但是這一功能目前只有google chrome（21.0+）和Safari（6.0+）部分實現了，在手機端，也就Blackberry browser實現了（完全實現），實現這一功能的瀏覽器均以webkit為內核。應用的范圍還很有限，在HTML5如火如荼的今天，我們依然可以做個很好的展望。

API介紹

　　桌面提醒功能是由window對象下的webkitNotifications來實現的，通過window.webkitNotifications將返回一個NotificationCenter對象。這個對象沒有屬性，但是卻關聯着四個方法：

1.requestPermission()

　　這個方法用於向用戶請求獲得消息提醒的權限，調用這個方法將產生如下效果（下圖），分別對應着3中狀態：“granted”（狀態值：0）表示用戶同意消息提醒；“default”（狀態值：1）表示默認狀態，用戶既未拒絕，也未同意；“denied”（狀態值：1）表示用戶拒絕消息提醒。只有在狀態值為0的時候才能夠允許消息提醒，這個值保存在一個內部變量中，並且是只讀的，通過checkPermission()方法可以提取到這個狀態值。

2.checkPermission()

　　這個方法用於獲取請求權限的狀態值，並返回這個值。

3.createNotification()

　　這個方法以純消息的方式創建提醒消息，它接受三個參數：iconURL, title, body。這三個參數均為字符串格式，iconURL表示一個圖標地址、title表示消息標題、body表示消息主體，默認這三個參數為空字符串。

調用這個方法會返回一個Notification對象，我們可以針對這個對象做更多的設置。

屬性：

　　dir：設置消息的排列方向，可取值為“auto”(自動), “ltr”(left to right), “rtl”(right to left)，下圖展示的是不同取值的顯示效果。

                                                                                                                                                     

      

　　tag：為消息添加標簽。如果設置此屬性，當有新消息提醒時，標簽相同的消息，后一個消息框會替換先前一個，不會出現多重消息提示框。

　　onshow：事件屬性，當消息框顯示的時候觸發該事件；

　　onclick：事件屬性，當點擊消息框的時候觸發該事件；

　　onclose：事件屬性，當消息關閉的時候觸發該事件；

　　onerror：事件屬性，當出現錯誤的時候觸發該事件；（TODO：錯誤類型）

方法：

　　addEventListener && removeEventListener：常規的添加和移除事件方法；

　　show：顯示消息提醒框；

　　close：關閉消息提醒框；

　　cancel：關閉消息提醒框（這個方法和close方法產生的效果是一樣，不清楚他們之間有什么深層次的區別）；

　　dispatchEvent：關於這個方法可以參考這里；

4.createHTMLNotification()

　　這個方法以HTML方式創建消息提醒，它接受一個參數，即HTML消息文檔的URL。同樣調用這個方法也會返回一個Notification對象，這個對象與用純文本方式創建消息提醒返回的Notification對象相同，故對其屬性和方法就不重述了。

實例

下面要創建一個桌面提醒的實例，真是的感受下這個一新功能。

1、由於支持桌面的瀏覽器還很有限，在使用這一功能前不可避免的要進行檢測是否支持。

function supported(){
    if(window.webkitNotifications){
        return true;
    } else{
        return false;
    }
}

這是一個簡單的功能檢測，如果瀏覽器支持就返回true，否則返回false。

2、如果瀏覽器支持桌面提醒功能，接下來就是請求用戶權限

function requestPermission(){
    if(supported){
         window.webkitNotifications.requestPermission();
         statue = window.webkitNotifications.checkPermission();
    }
}

通過requestPermission()方法來請求用戶權限，並且使用checkPermission()方法來檢查狀態值，這個值存儲在一個全局變量statue中。

3、檢查statue值，根據不同的狀態值，采取相應的行為。

function checkStatue(){
      switch (statue){
           case 0:   // granted
                message();
                break;
           case 1:  // default
                requestPermission();
                break;
           case 2:  // denied
                return;
      }
12 }

 當用戶同意進行消息提醒的時候，即狀態值為0，執行message（）方法，這個方法創建一個消息框並顯示。如果狀態值為1，即用戶並沒有對權限請求作出反應，將會再次請求一次。如果用戶拒絕了，即狀態值為2，結束這次進程。

4、創建消息提醒框

 NotificatonCenter對象提供了兩種創建消息框的方法，即createNotification和createHTMLNotification，前者以純文本的方式創建桌面提醒消息，后者以HTML方式創建桌面提醒消息。關於這兩種方法的使用前面已經介紹了。

4.1、使用createNotification方法創建桌面提醒

function message(){
     var icon = "../IMAGE/mediaICON/pause.png"; //如果直接拷貝，這個地方URL路徑可能會報錯！
     var title = "hupeng";
     var body = "Hello World";
     var msgObj = window.webkitNotifications.createNotification(icon, title, body);
     msgObj.show();
}

 下圖是運行效果

4.2、使用createHTMLNotification方法創建桌面提醒

function message(){
    var msgObj = window.webkitNotifications.createHTMLNotification("HTMLNotification.html");
    msgObj.show();
}

 這個方法需要提前定義一個HTML文件，下圖是運行效果

 4.3、設置桌面提醒框的屬性

可以設置“dir”屬性來控制文字的顯示方式（注意：如果用createHTMLNotification方法來創建消息提醒框，該屬性無效，文字的樣式以定義的HTML文件為准），可以為來源相同的桌面提醒框設置相同的“tag”屬性，這樣可以保證每次提醒的都是最新消息。另外，Notification對象還有四個事件屬性，將在下小節來介紹這幾個屬性。以下為實例代碼

function message(){
    var icon = "../IMAGE/mediaICON/pause.png";
    var title = "hupeng";
    var body = "Hello World";
    var msgObj = window.webkitNotifications.createNotification(icon, title, body);

    msgObj.dir = "rtl"; //設置dir屬性
    msgObj.tag = "aa";  //設置tag屬性

    msgObj.show();
}

 

 4.4、為桌面提醒框添加事件

前面我們提到的Notification對象的四個事件屬性，我們可以通過這四個事件屬性為Notification對象添加響應事件。例如我們通常希望桌面提醒框彈出后間隔一段時間自動關閉，可以通過如下代碼來實現

function message(){
    var icon = "../IMAGE/mediaICON/pause.png";
    var title = "hupeng";
    var body = "Hello World";
    var msgObj = window.webkitNotifications.createNotification(icon, title, body);

    msgObj.onshow = function(){  //設置消息提醒框在4秒后自動關閉
         setTimeout(function(){
                 msgObj.close();  //這里也可以使用cancel方法
               }, 4000);
    }

    msgObj.show();
}

 

 當然也可以使用常規的addEventListener方法來實現。其他幾個事件如click, close, error也類似。

注意：桌面提醒功能要在服務器的環境下才能夠正常使用

-------------------------------------------------------------------------------分割線-----------------------------------------------------------------------------------

下面是一個小JS類，用於實現桌面提醒

 

function DesktopNotification(notificationStyle, options, displayTime) {
    /**
     *@param {Number} notificationStyle 設定創建消息框方式，可取值1（純文本方式）, 2（HTML方式） 默認為1
     *@param {Object} options 設定消息體參數，包含三個屬性（url, title, body),如果notificationStyle值為2，只需定義url屬性
     *@param {Number} displayTime 設定消息顯示時間，單位ms, 默認為2000
    */
    this.isSupport = undefined,
    this.permissionStatue = 1,  //PERMISSION_ALLOWED: 0,  PERMISSION_NOT_ALLOWED: 1, PERMISSION_DENIED: 2
    this.notificationStyle = notificationStyle || 1, 
    this.options = options ||{url: "", title: "", body: ""},
    this.displayTime = displayTime || 2000,
    this.content = undefined
}

DesktopNotification.prototype = {
    constructor: DesktopNotification,

    checkSupport: function(){
        if(window.webkitNotifications){
            this.isSupport = true;
        } else{
            this.isSupport = false;
        }
    },

    requestPermission: function(){
        window.webkitNotifications.requestPermission();
        this.permissionStatue = window.webkitNotifications.checkPermission();
    },

    checkPermissionStatue: function(){
        if(this.permissionStatue == 0){
            this.notificationContent();
        }                
    },

    notificationContent: function(){
        var self = this;
        switch(this.notificationStyle){
            case 1 :
                this.content = window.webkitNotifications.createNotification(this.options.url, this.options.title, this.options.body);
                break;
            case 2 :
                this.content = window.webkitNotifications.createHTMLNotification(this.options.url);
                break;
            default :
                alert('Sorry, you have not defined the notificationStyle.');
        };

        this.content.onshow = function(){
            setTimeout(function(){
                self.content.cancel();
            }, self.displayTime)
        }
        this.content.show();
    },

    init: function(){
        this.checkSupport();
        if(this.isSupport){
            this.requestPermission();
            this.checkPermissionStatue();
        }
    }

}

 

 

使用示例：

 

var options = {
    url : "../IMAGE/mediaICON/pause.png",
    title : "hupeng",
    body : "Hello World!"
}

var message = new DesktopNotification(1,options,4000);
message.init();

 

 

 錯誤在所難免，請拾磚重拍！