使用webkit创建类似桌面应用的消息提醒

原文地址

通过内建的webkitNotifications API Chrome现在支持桌面消息提醒，见Demo

这种方式很酷，因为类似于在线E-mail，日历，任务管理，在线监控等应用有了一种更加优雅和统一的方式来处理用户提醒的问题。而在这之前我们可能不得不借助window.alert.

11.JPG

介绍此API的文档比较少，但是它能够简单灵活的支持一些应用需要，比如基于域名的控制，弹出内嵌的HTML片段的层叠窗口等等

要在应用中使用桌面窗口应用，需要调用以下三个API：

1.window.webkitNotifications.requestPermission(callback) ：请求访问当前域下的桌面消息提醒（Desktop Notifications）

2.window.webkitNotifications.checkPermission() ：如果桌面消息提醒（Desktop Notifications）可以访问，此函数返回0

3.window.webkitNotifications.createNotification：返回一个消息提醒的实例对象，可以通过调用show()函数将其显示出来。

判断桌面消息提醒是否可用最直接的方式是判断window.webkitNotifications是否被定义，在下面的Notifier.HasSupport()已经封装了该测试。

当你请求requestPermission(callback)，在Chrome浏览器中会弹出是否允许访问桌面消息提醒的对话框。

45.JPG

点击“允许”访问。也可以在chrome的设置选项中允许一个站点的任何通知。

下面是一个简单封装了上述API的函数

function Notifier() {} 
// Returns "true" if this browser supports notifications. 
Notifier.prototype.HasSupport = function() { 
  if (window.webkitNotifications) { 
    return true; 
  } else { 
    return false; 
  } 
} 
// Request permission for this page to send notifications. If allowed, 
// calls function "cb" with "true" as the first argument. 
Notifier.prototype.RequestPermission = function(cb) { 
  window.webkitNotifications.requestPermission(function() { 
    if (cb) { cb(window.webkitNotifications.checkPermission() == 0); } 
  }); 
} 
// Popup a notification with icon, title, and body. Returns false if 
// permission was not granted. 
Notifier.prototype.Notify = function(icon, title, body) { 
  if (window.webkitNotifications.checkPermission() == 0) { 
    var popup = window.webkitNotifications.createNotification( 
      icon, title, body); 
    popup.show(); 
    return true; 
  } 
  return false; 
} 

参考 WebKit Desktop Notification Demo