Chrome的通知功能—webkitNotifications对象
2012-09-27 14:09
239 查看
在很多社交网站如facebook, 人人网上，都会有一种消息提醒的功能。当你在浏览网页时有人给你发了消息，在你页面的右下角会出现一个小的提示框。这是一个很实用的小功能，但在目前来说，它有一个局限性：提示框只能在浏览器的当前页面中显示。如果你此时在浏览其他页面，甚至是干其他事情，提示框就显示不出来了。当前，社交网站们都使用了提示声音来增强这种提示功能。但如果告诉你有一种办法能够实现在桌面上显示出一个弹出框呢？即使你浏览器处于最小化状态也能够显示出来，答案就是HTML5
下面是实现该功能的源代码，需要注意的是，你不能简单的拷贝它们到文件中直接运行，而是通过web服务器访问才可以出现效果。这里有一个在线demo
123456789101112131415161718192021222324<!doctype
html><html><head> <meta
http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script> function
RequestPermission (callback) { window.webkitNotifications.requestPermission(callback); } function
showNotification(){if (window.webkitNotifications.checkPermission()
> 0) { RequestPermission(showNotification); }else
{ window.webkitNotifications.createNotification("http://a1.twimg.com/profile_images/710503034/lillypad_rss_normal.png",
"title", "body").show(); } } </script> </head> <body> <button
onclick="showNotification()">ShowNotification</button> </body></html>
在代码中，首先需要询问用户是否同意这个站点弹出窗口，也就是用户授权。代码中对应RequestPermission方法，它带有一个回调函数，如果用户同意弹出窗口的话代码会继续执行showNotification()。第15行的三个参数：第一个为显示的图片链接，第二个是标题，第三个是消息内容。代码非常简单
下面再补充些
You can use webkitNotifications.checkPermission() wich will return the
permission status:
0 = PERMISSION_ALLOWED
1 = PERMISSION_NOT_ALLOWED
2 = PERMISSION_DENIED
今天在浏览cnbeta.com站的时候，看到了《Chrome开始带来WebKit的通知功能》一文。Chrome又一次领先的发布了新技术的API—webkitNotifications。通过查看它给的例子(Desktop
Notification Demo)，里面有比较详细的说明，不过看起来还是比较难懂，所以我整理了下，重新编写了例子中的代码，加上注释，算是比较清晰了吧。《具体实例》
[javascript]
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;
}
}
[/javascript]
上面展示的代码中比较陌生的就是：window.webkitNotifications，requestPermission，checkPermission，
createNotification，show。目前api中主要是这几个对象或者方法，其中window.webkitNotification是整个通知功能的对象，requestPermission、checkPermission、createNotification都是它的静态化方法，show是通过createNotification实例化出来的对象的方法。顾名思义，requestPermission就是获取用户权限的方法，它带有一个函数参数；checkPermission用来检查是否获得了权限；createNotification用于声明一个通知功能的实例；show方法就是这个通知功能实例的方法，用于展示桌面弹出框(注意看右下角哦，^_^)。
因此，使用该通知功能的步骤也就清晰了：先检查是否支持webkitNotifications –> 获得用户允许的权限 –> 检查是否得到了权限 –> 声明用于通知功能的实例 –> 通过show方法弹出通知信息框 –> 恭喜你上手了。:)
下面是实现该功能的源代码，需要注意的是，你不能简单的拷贝它们到文件中直接运行，而是通过web服务器访问才可以出现效果。这里有一个在线demo
123456789101112131415161718192021222324<!doctype
html><html><head> <meta
http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script> function
RequestPermission (callback) { window.webkitNotifications.requestPermission(callback); } function
showNotification(){if (window.webkitNotifications.checkPermission()
> 0) { RequestPermission(showNotification); }else
{ window.webkitNotifications.createNotification("http://a1.twimg.com/profile_images/710503034/lillypad_rss_normal.png",
"title", "body").show(); } } </script> </head> <body> <button
onclick="showNotification()">ShowNotification</button> </body></html>
在代码中，首先需要询问用户是否同意这个站点弹出窗口，也就是用户授权。代码中对应RequestPermission方法，它带有一个回调函数，如果用户同意弹出窗口的话代码会继续执行showNotification()。第15行的三个参数：第一个为显示的图片链接，第二个是标题，第三个是消息内容。代码非常简单
下面再补充些
You can use webkitNotifications.checkPermission() wich will return the
permission status:
0 = PERMISSION_ALLOWED
1 = PERMISSION_NOT_ALLOWED
2 = PERMISSION_DENIED
今天在浏览cnbeta.com站的时候，看到了《Chrome开始带来WebKit的通知功能》一文。Chrome又一次领先的发布了新技术的API—webkitNotifications。通过查看它给的例子(Desktop
Notification Demo)，里面有比较详细的说明，不过看起来还是比较难懂，所以我整理了下，重新编写了例子中的代码，加上注释，算是比较清晰了吧。《具体实例》
[javascript]
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;
}
}
[/javascript]
上面展示的代码中比较陌生的就是：window.webkitNotifications，requestPermission，checkPermission，
createNotification，show。目前api中主要是这几个对象或者方法，其中window.webkitNotification是整个通知功能的对象，requestPermission、checkPermission、createNotification都是它的静态化方法，show是通过createNotification实例化出来的对象的方法。顾名思义，requestPermission就是获取用户权限的方法，它带有一个函数参数；checkPermission用来检查是否获得了权限；createNotification用于声明一个通知功能的实例；show方法就是这个通知功能实例的方法，用于展示桌面弹出框(注意看右下角哦，^_^)。
因此，使用该通知功能的步骤也就清晰了：先检查是否支持webkitNotifications –> 获得用户允许的权限 –> 检查是否得到了权限 –> 声明用于通知功能的实例 –> 通过show方法弹出通知信息框 –> 恭喜你上手了。:)
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Chrome的通知功能—webkitNotifications对象
- Chrome桌面通知功能Notifications对象
- chrome 通知功能使用实践
- js实现浏览器通知功能
- 聊聊：Chrome 70发布都增加了那些功能
- JAVA面向对象API————List的特有功能
- 快速集成推送通知功能---百度云推送
- D u p l i c a t e H a n d l e函数存在的奇怪现象之一是，目标进程没有得到关于新内 核对象现在可以访问它的通知
- JSP有哪些内置对象，功能是什么
- 用_审核对象_功能记录文件删除记录
- c# 对ArcEngine中ITable对象的使其具有更加强大的功能。
- CSDN新年放假通知:暂停资源区评论功能(估计博客也是一样的原因）
- 黑马程序员：File对象的基本功能
- 本地通知（UILocalNotification）的学习和使用（通过本地通知实现提醒功能）
- Chrome 开发者控制台中，你可能意想不到的功能
- JavaScript编写Chrome扩展实现与浏览器的交互及时间通知
- 常见对象_StringBuffer的删除功能
- 利用 FormData 对象和 Spring MVC 配合实现Ajax文件下载功能
- 手把手教你TestComplete_对象浏览功能
- Chrome 28发布：引入通知中心和Blink标记