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();

 

 

 错误在所难免，请拾砖重拍！