您的位置：首页 > Web前端 > HTML5

html5桌面通知(Web Notifications)实例解析

2015-11-12 11:24 501 查看
通过Web Notifications（桌面通知系统），网站可以在用户桌面弹出一条通知，无论用户是否浏览当前网页，甚至最小化了浏览器，通知均可到达用户桌面。

一、Notification API

在 Notification API 中会用到两个对象， notification 对象和NotificationCenter
接口。

1、notification 对象

interface Notification : EventTarget {
// display methods
void show();
void cancel();
// event handler attributes
attribute Function ondisplay;
attribute Function onerror;
attribute Function onclose;
attribute Function onclick;
}

这就是notification需要使用到的接口，它有2个方法和相关的4个属性。

Notification 方法

用来显示和隐藏提示框的方法：

Show - 该方法用来显示一个提醒
Cancel - 该方法用来移除提醒，如果提醒当前被现实则会被隐藏，如果还未被显示，则将被阻止显示。

Notification 属性

通知属性用作事件监听器，监听提醒中的不同事件：

ondisplay - 当 notification 被显示时调用
onerror - 当 notification 出现错误时调用
onclose - 当 notification 关闭时调用
onclick - 当提示框被点击时调用

2、NotificationCenter
接口

interface NotificationCenter {
// Notification factory methods.
Notification createNotification(in DOMString iconUrl, in DOMString title, in DOMString body) throws(Exception);
optional Notification createHTMLNotification(in DOMString url) throws(Exception);
// Permission values
const unsigned int PERMISSION_ALLOWED = 0;
const unsigned int PERMISSION_NOT_ALLOWED = 1;
const unsigned int PERMISSION_DENIED = 2;
// Permission methods
int checkPermission();
void requestPermission(in Function callback);
}
interface Window {
...
attribute NotificationCenter webkitNotifications;
...
}
Notification
center 用来创建 notification 对象，并检查当前页面是否有显示该对象的权限。

使用 Notification center 时需要用到4个方法：

createNotification - 如果 notification 有权限被显示，呢么该方法将会创建一个 notification 对象，并为其填充相关的内容。如果页面没有允许 notification ，那么将抛出一个安全异常。
createHTMLNotification - 该方法类似于 createNotification ，若页面有权限显示 notification 它会返回一个相关的对象。该方法使用了一个 URL 参数来加载要显示的 HTML 内容。
checkPermission - 该方法返回该页面使用 notification 的整形权限值。PERMISSION_ALLOWED = 0, PERMISSION_NOT_ALLOWED =
1, 或者 PERMISSION_DENIED = 2
requestPermission - 该方法将向用户请求询问显示提示框的权限。

检查浏览器是否支持 Notification

当你准备用 notification API 做点什么之前，你需要先检查浏览器是否支持，你可以使用一下代码来检查：

获得显示权限

/**
* Check if the browser supports notifications
*
* @return true if browser does support notifications
*/
function browser_support_notification()
{
return window.webkitNotifications;
}


显示一个提醒之前你需要得到用户的允许，获得此权限你需要做的就是使用 requestPermission() 方法：

显示纯文本提示框

/**
* Request notification permissions
*/
function request_permission()
{
// 0 means we have permission to display notifications
if (window.webkitNotifications.checkPermission() == 0) {
window.webkitNotifications.createNotification();
} else {
window.webkitNotifications.requestPermission();
}
}


创建一个显示纯文本的提示框前你需要检查是否有权限显示。如果有权限我们就能使用createNotification()方法创建一个新的 notification 了，使用 createNotification() 传递图片、标题以及描述信息3参数即可。

?

/**
* Create a plain text notification box
*/
function plain_text_notification(image, title, content)
{
if (window.webkitNotifications.checkPermission() == 0) {
return window.webkitNotifications.createNotification(image, title, content);
}
}


显示 HTM L 提醒框

在显示之前我们也需要检查显示权限，如果有权限，我们可以使用createHTMLNotification(url) 方法创建，传递的 url 地址即我们要显示的页面。
/**
* Create a notification box with html inside
*/
function html_notification(url)
{
if (window.webkitNotifications.checkPermission() == 0) {
return window.webkitNotifications.createHTMLNotification(url);
}
}

二、完整案例

接下来上一个完整的案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Notifications API</title>
</head>
<body>
<input id="fire" type="button" value="fire Notification">
<script>
var btn = document.getElementById("fire");
if(window.Notification && Notification.permission !== "denied") {
Notification.requestPermission(function(status) {
if(status === 'granted') {
//弹出一个通知
btn.addEventListener('click', function() {
var n = new Notification('Title', {//标题
body : 'I am a Notification' //显示内容
//以下是可选参数
//icon :
//lang :
//onclick:
//onclose:
//onerror:
//onshow:
//tag:
});
//两秒后关闭通知
setTimeout(function() {
n.close();
}, 2000);
});
}
});
}
</script>
</body>
</html>
首先，我们需要判断浏览器是否支持Notification。如果通过
Notification.requestPermission
向用户请求权限，这时浏览器会弹出一个是否允许显示通知的提示；如果用户选择了“允许”，那么返回的
status
将会是
granted
。这个时候我们就可以通过
Notification()
来创建实例了：
new Notification('Title', {
body : 'I am a Notification',
icon : './images/test1.png'
})


第一个参数为标题，第二个参数为配置参数，里面包含以下可选参数：



效果图如下（Chrome）：



接下来，两秒后，通知将会消失。


兼容性

Web Notifications API目前在以下浏览器得到了支持：

Firefox 35+
Chrome 31+
Safari 7.1+
Opera 27+
Android Browser 4.4+ （需要加上
webkit
前缀）

详情点击这里
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航