Chrome的通知功能—webkitNotifications对象
2010-06-22 17:20
134 查看
今天在浏览cnbeta.com站的时候,看到了《Chrome开始带来WebKit的通知功能》一文。Chrome又一次领先的发布了新技术的API—webkitNotifications。通过查看它给的例子(Desktop Notification Demo),里面有比较详细的说明,不过看起来还是比较难懂,所以我整理了下,重新编写了例子中的代码,加上注释,算是比较清晰了吧。《具体实例》
var Notify = function(){}
//判断是否支持webkitNotifications
Notify.prototype.isSupport = function(){
return !!window.webkitNotifications;
}
//需要向用户申请权限来确定是否支持webkitNotifications,如果得到权限,就会执行callback,参数为true.
Notify.prototype.getPermission = function(callback){
window.webkitNotifications.requestPermission(function(){
if (callback) {
callback(this.checkPermission());
}
});
}
//查看是否得到权限
Notify.prototype.checkPermission = function(){
return !!(window.webkitNotifications.checkPermission() == 0);
}
//声明一个webkitNotifications实例,并且使用show方法触发桌面提示框
Notify.prototype.show = function(icon, title, body){
//声明webkitNotifications实例
var _notify = window.webkitNotifications.createNotification(icon, title, body);
_notify.show();
}
onload = function(){
var notify = new Notify();
if (!notify.isSupport()) {
alert("Your browser don't support webkitNotifications!!");
return;
}
document.getElementById("get").onclick = function(){
notify.getPermission();
return false;
}
document.getElementById("btn").onclick = function(){
if (notify.checkPermission()) {
notify.show("", "Notify in Chrome", "This is come from /"Javascript's dancing/"")
} else {
alert("Apply permission please.You can click /"Get Permission/".");
}
return false;
}
}
上面展示的代码中比较陌生的就是:window.webkitNotifications,requestPermission,checkPermission,
createNotification,show。目前api中主要是这几个对象或者方法,其中window.webkitNotification是整个通知功能的对象,requestPermission、checkPermission、createNotification都是它的静态化方法,show是通过createNotification实例化出来的对象的方法。顾名思义,requestPermission就是获取用户权限的方法,它带有一个函数参数;checkPermission用来检查是否获得了权限;createNotification用于声明一个通知功能的实例;show方法就是这个通知功能实例的方法,用于展示桌面弹出框(注意看右下角哦,^_^)。
因此,使用该通知功能的步骤也就清晰了:先检查是否支持webkitNotifications –> 获得用户允许的权限 –> 检查是否得到了权限 –> 声明用于通知功能的实例 –> 通过show方法弹出通知信息框 –> 恭喜你上手了。:)
更多参考:《Chrome开始带来WebKit的通知功能》,《Webkit JavaScript Notifications API》,《Desktop Notifications with Webkit》
var Notify = function(){}
//判断是否支持webkitNotifications
Notify.prototype.isSupport = function(){
return !!window.webkitNotifications;
}
//需要向用户申请权限来确定是否支持webkitNotifications,如果得到权限,就会执行callback,参数为true.
Notify.prototype.getPermission = function(callback){
window.webkitNotifications.requestPermission(function(){
if (callback) {
callback(this.checkPermission());
}
});
}
//查看是否得到权限
Notify.prototype.checkPermission = function(){
return !!(window.webkitNotifications.checkPermission() == 0);
}
//声明一个webkitNotifications实例,并且使用show方法触发桌面提示框
Notify.prototype.show = function(icon, title, body){
//声明webkitNotifications实例
var _notify = window.webkitNotifications.createNotification(icon, title, body);
_notify.show();
}
onload = function(){
var notify = new Notify();
if (!notify.isSupport()) {
alert("Your browser don't support webkitNotifications!!");
return;
}
document.getElementById("get").onclick = function(){
notify.getPermission();
return false;
}
document.getElementById("btn").onclick = function(){
if (notify.checkPermission()) {
notify.show("", "Notify in Chrome", "This is come from /"Javascript's dancing/"")
} else {
alert("Apply permission please.You can click /"Get Permission/".");
}
return false;
}
}
上面展示的代码中比较陌生的就是:window.webkitNotifications,requestPermission,checkPermission,
createNotification,show。目前api中主要是这几个对象或者方法,其中window.webkitNotification是整个通知功能的对象,requestPermission、checkPermission、createNotification都是它的静态化方法,show是通过createNotification实例化出来的对象的方法。顾名思义,requestPermission就是获取用户权限的方法,它带有一个函数参数;checkPermission用来检查是否获得了权限;createNotification用于声明一个通知功能的实例;show方法就是这个通知功能实例的方法,用于展示桌面弹出框(注意看右下角哦,^_^)。
因此,使用该通知功能的步骤也就清晰了:先检查是否支持webkitNotifications –> 获得用户允许的权限 –> 检查是否得到了权限 –> 声明用于通知功能的实例 –> 通过show方法弹出通知信息框 –> 恭喜你上手了。:)
更多参考:《Chrome开始带来WebKit的通知功能》,《Webkit JavaScript Notifications API》,《Desktop Notifications with Webkit》
相关文章推荐
- Chrome桌面通知功能Notifications对象
- Chrome的通知功能—webkitNotifications对象
- chrome 通知功能使用实践
- ASP.NET中实现MSN通知消息功能
- js 控制textbox enter 回车 禁止提交功能(ie9,firefox,ie8,chrome测试通过)
- ASP.NET中实现MSN通知消息功能
- Chrome页面渲染的GPU加速技术 - 基础:WebKit软件渲染模式
- 具有自动恢复功能的通知栏图标控件
- ASP.NET中实现MSN通知消息功能
- Linux、Mac和Windows的Chrome 70现在默认启用画中画功能
- chrome调试工具常用功能整理
- [转] 在安卓设备上使用 Chrome 远程调试功能
- 如何使用 Chrome 的多账户功能
- Chrome桌面提醒功能
- 去除Android系统应用的通知功能
- 利用chrome的调试功能调试JavaScript代码
- iPhone的Push(推送通知)功能原理浅析
- chrome插件开发之:一键购物助手功能开发总结
- Android 通过开源框架实现加载网络图片并下载到SD卡通知系统相册显示,(并实现分享图片功能)
- iPhone的Push(推送通知)功能原理浅析