由于平时忙于工作，已经有很长时间没有更新博客了，偶尔会进来看一眼，发现有很多朋友在下面留言，我很庆幸当时能写下这些有价值的文章，直到现在还能够帮助这么多朋友解决Android方面的一些问题。
最近研究了一下HTML5方面的一些新技术，很是想记录下来成文，一方面可以加深自己对技术的理解，另外希望能帮助初学者理解和学习这些技术。今天我们先来讲解一下桌面通知，即Web Notifications技术。
Web Notifications是HTML5中一个令人欣喜的新特性，它支持开发者配置和显示桌面通知，为用户提供更好的体验，最令人称赞的是，即使用户忙于其他工作时也可以收到来自页面的消息通知，例如一个新邮件的提醒，或者一个在线聊天室收到的消息提醒等等。
接下来，我们就试着一步一步创建我们自己的消息通知。
要创建消息通知，首先我们要创建一个消息框，这非常很简单，直接使用window对象下面的Notification类即可，代码如下：
var n = new Notification("sir, you got a message", {icon: 'img/icon.png',body: 'you will have a meeting 5 minutes later.'});
在Notification这个类的构造函数中，有两个重要的参数，第一个是消息的标题，第二个是消息体对象，其中包括消息框的图标（icon）和消息内容（body）。
在执行完以上代码后，我们就成功地创建了一个消息框实例，在Chrome下面它最终会显示成这样：
到这里我们已经成功了一半，但能不能正确地显示出这个消息框，最终还取决于用户的授权。鉴于浏览器的安全机制，只有用户同意网页弹出消息通知框，消息通知才能够真正的显示出来。所以现在我们要做的就是申请用户授权。
Notification类提供了一个requestPermission方法，用来请求用户授权，代码如下：
Notification.requestPermission(function(status) {//status是授权状态，如果用户允许显示桌面通知，则status为'granted'console.log('status: ' + status);//permission只读属性var permission = Notification.permission;//default 用户没有接收或拒绝授权请求 不能显示通知//granted 用户接受授权请求 允许显示通知//denied 用户拒绝授权请求 不允许显示通知console.log('permission: ' + permission);});
当这段代码执行时，浏览器会询问用户，，是否允许该站点显示消息通知，如下图所示：
如果用户点击了左边的Block按钮，无论我们如何创建Notification实例，消息始终是无法显示出来的；只有用户选择了Allow按钮，代码才能正确执行并且显示出消息框来。
正如上面代码中所描述的那样，requestPermission函数执行完后，会进入一个回调函数，该回调函数可以传递一个status参数，表示在用户做出选择后，最终的授权状态。如果用户点击了授权提示右边的关闭按钮，相当于忽视了授权请求，此时status为default，在default状态下是无法显示消息的；如果用户点击了Block按钮拒绝授权请求，则status会是denied状态，自然是无法显示消息；如果用户点击了Allow按钮接受授权请求，则此时status会变成granted状态，只有在granted状态下才可以正确显示消息。
同时，在执行完授权请求后，浏览器会将权限状态赋到Notification的permission属性上面，该属性对于开发者来讲是只读的，它的值跟上述的status值是一样的。所以如果我们要显示一个消息通知，可以先判断一下是否拥有权限：
if (Notification.permission === 'granted') {//show notification}
正如上面描述的那样，当权限为granted时，我们就可以显示消息通知了。但是单纯的显示一个消息框是没有任何吸引力的，所以消息通知应该具有一定的交互性，在显示消息的前前后后都应该有事件的参与。Notification一开始就制定好了一系列事件函数，开发者可以很方面的使用这些函数处理用户交互：
var n = new Notification("sir, you got a message", {icon: 'img/icon.png',body: 'you will have a meeting 5 minutes later.'});//onshow函数在消息框显示时会被调用//可以做一些数据记录及定时操作等n.onshow = function() {console.log('notification shows up');//5秒后关闭消息框setTimeout(function() {n.close();}, 5000);};//消息框被点击时被调用//可以打开相关的视图，同时关闭该消息框等操作n.onclick = function() {alert('open the associated view');//opening the view…n.close();};//当有错误发生时会onerror函数会被调用//如果没有granted授权，创建Notification对象实例时，也会执行onerror函数n.onerror = function() {console.log('notification encounters an error');//do something useful};//一个消息框关闭时onclose函数会被调用n.onclose = function() {console.log('notification is closed');//do something useful};我们可以看到，Notification有4个常用的函数可以用来处理事件交互，onshow函数可以在消息展示时执行，onclick函数可以在用户点击消息后被调用，onclose函数是在消息框被关闭时被调用，onerror函数是发生错误时被调用，上面也提到了，如果没有被授权而继续创建消息通知，也会执行onerror函数。掌握了这几个函数的应用，基本上可以很好地处理消息事件了。
最后，我们会把这些步骤组织起来，形成一个简单的示例，来更好地展示这个新特性。
首先，创建下面这个文件结构：
然后我们要把上面讲的几个步骤的代码组织起来，形成一个JavaScript对象，如下面代码所示：
var NotificationHandler = {isNotificationSupported: 'Notification' in window,isPermissionGranted: function() {return Notification.permission === 'granted';},requestPermission: function() {if (!this.isNotificationSupported) {console.log('the current browser does not support Notification API');return;}Notification.requestPermission(function(status) {//status是授权状态，如果用户允许显示桌面通知，则status为'granted'console.log('status: ' + status);//permission只读属性var permission = Notification.permission;//default 用户没有接收或拒绝授权 不能显示通知//granted 用户接受授权 允许显示通知//denied 用户拒绝授权 不允许显示通知console.log('permission: ' + permission);});},showNotification: function() {if (!this.isNotificationSupported) {console.log('the current browser does not support Notification API');return;}if (!this.isPermissionGranted()) {console.log('the current page has not been granted for notification');return;}var n = new Notification("sir, you got a message", {icon: 'img/icon.png',body: 'you will have a meeting 5 minutes later.'});//onshow函数在消息框显示时会被调用//可以做一些数据记录及定时操作等n.onshow = function() {console.log('notification shows up');//5秒后关闭消息框setTimeout(function() {n.close();}, 5000);};//消息框被点击时被调用//可以打开相关的视图，同时关闭该消息框等操作n.onclick = function() {alert('open the associated view');//opening the view…n.close();};//当有错误发生时会onerror函数会被调用//如果没有granted授权，创建Notification对象实例时，也会执行onerror函数n.onerror = function() {console.log('notification encounters an error');//do something useful};//一个消息框关闭时onclose函数会被调用n.onclose = function() {console.log('notification is closed');//do something useful};}};document.addEventListener('load', function() {//try to request permission when page has been loaded.NotificationHandler.requestPermission();});一直有记日记的习惯，可是，旅行回来，都懒得写日记来记录，
