在本文中将利用封装过的api实现一个定时提醒工具。
工具的主要目的是：自己经常坐在电脑前，一坐就是好几个小时，希望有工具能够每小时提醒自己起来活动休息一会。
主要功能有：用户可以设置周期性的提醒时间，比如设置每1小时提醒一次，1小时后将弹出通知框提醒用户时间到。
其他包括：用户能够设置对话框的持续时间，比如持续15秒，15秒后对话框消失，以及提醒内容等。
html&css
首先先创建基本的html结构如下：
时间提醒
div {
margin:40px 15px;
}
#main {
margin:0 auto;
width:360px;
border: 2px solid green;
}
.operation {
text-align:center;
}
设置时间间隔（分）：
弹窗持续时间（分）：
设置提醒消息：你已经做了很久啦，让眼睛放松放松吧~~！
复制代码
desktopnotify.js是前面提到的封装过的notification api， desktop-notification.js则是相关的业务逻辑js，后面会说到。基本的效果如下，虽然是丑陋了点- -！！
程序的逻辑比较简单，设置各个字段，点击开始按钮，程序开始计时，到指定时间，弹出通知框。
javascrip
desktopnotify.js的功能主要是对原生notification api做一些基本封装，代码如下：
//desktopnotify.js
void function() {
var _instance = null,
_permissionstatus = -1,
_eventtable = {
show: 1,
error: 1,
close: 1,
click: 1
};
/**
*调用例子：
* var dn = window.xx.desktopnotify;
* dn.requestpermission(function(){
* dn.show(http://xxx, hello, world);
* });
*/
var desktopnotify = {
/**
*检测是否支持notification，支持返回true
*/
issupport : function() {
return 'notification' in window || 'webkitnotifications' in window;
},
/**
*弹出一个文本桌面通知
*
* @param {string} iconurl:图标资源
* @param {string} title: 标题
* @param {string} content: 内容
*/
show : function(iconurl, title, content) {
_instance = this.create(iconurl, title, content);
_instance.show();
},
/**
*弹出一个 html桌面通知
*
* @param {string} url:html链接资源
*/
showhtml : function(url) {
_instance = this.createhtml(url);
_instance.show();
},
/***
* 关闭一个桌面通知
*
* @param {object} cb： 隐藏后的回调函数
*
*/
hide : function(cb) {
_instance && _instance.close();
cb && cb();
},
/**
* 释放通知对话框引用
*/
destroy: function() {
_instance = null,
_permissionstatus = -1;
},
/**
* 检查权限状态
* @return {number}: 0为允许，1为不允许， 2为禁止
*/
checkpermission : function() {
return _permissionstatus = webkitnotifications.checkpermission();
},
/**
* 检查是否得到授权
* @return {boolean}： true表示得到授权
*/
ispermitted: function() {
return this.checkpermission() === 0;
},
/**
* 请求授权
* @param {object} cb：得到授权后的回调函数
*/
requestpermission: function(cb) {
if(this.ispermitted()) {
cb && cb();
} else {
webkitnotifications.requestpermission(cb);
}
},
/**
* 创建一个文本性质的通知对话框，但不展示
* @param {object} iconurl
* @param {object} title
* @param {object} content
* @return {object} notification实例
*/
create: function(iconurl, title, content) {
return webkitnotifications.createnotification(iconurl, title, content);
},
/**
* 创建一个html性质的通知对话框，但不展示
* @param {object} url: 指向html页面的链接
* @return {object} notification实例
*/
createhtml: function(url) {
return webkitnotifications.createhtmlnotification(url);
},
/**
* 添加事件监听函数
* @param {object} type: 事件类型
* @param {object} fn: 监听函数
*/
on: function(type, fn) {
_eventtable[type] && _instance && _instance.addeventlistener(type, fn, false);
},
/**
* 移除事件监听函数
* @param {object} type: 事件类型
* @param {object} fn: 监听函数
*/
un: function(type, fn) {
_eventtable[type] && _instance && _instance.removeeventlistener(type, fn, false);
}
};
window.xx || (window.xx = {});
window.xx.desktopnotify = desktopnotify;
}();
复制代码
desktop-notification.js则是业务代码，如下：
//desktop-notification.js
void function() {
var title = '时间到啦~~！亲！！',
//图标路径
iconurl = 'icon.png';
var dn = window.xx.desktopnotify;
/**
* 通知函数，根据设置的时间间隔，周期的弹出通知框
*/
function notify(content, duration) {
dn.show(iconurl, title, content);
settimeout(function() {
dn.hide();
}, duration);
}
if (!dn.issupport()) {
alert('浏览器不支持桌面通知！');
return;
}
var startel = document.getelementbyid('start'),//开始按钮
stopel = document.getelementbyid('stop'),//停止按钮
intervalel = document.getelementbyid('interval'),//提醒时间间隔输入框
contentel = document.getelementbyid('content'),//提醒内容输入框
durel = document.getelementbyid('duration'),//通知框持续时间输入框
timer = null;
startel.addeventlistener('click', function(evt) {
/**
* 点击“开始”，先申请用户授权，经过授权后，获取相关的提醒时间间隔，以及内容，周期的调用notify函数弹出通知框
*/
dn.requestpermission(function() {
timer = setinterval(notify, intervalel.value * 60 * 1000, contentel.value, durel.value * 60 * 1000);
startel.disabled = true;
});
}, false);
stopel.addeventlistener('click', function(evt) {
/**
* 点击“停止”，清除周期调用
*/
clearinterval(timer);
startel.disabled = false;
}, false);
}();
复制代码
运行效果
注意，网页必须在http或https协议下打开，而不能直接用file协议打开，否则无法运行（若用户设置了浏览器接收任何通知，倒是可以直接打开运行）。运行的效果如下：
即便当浏览器最小化，或者未在高亮状态，通知框一样会定时弹出。
总结
在本文中，利用了html5 notification做了一个简单的小工具，用于提醒自己不要久坐，按时休息= =！虽然界面是丑陋了点，不过效果还可以。
完整代码点击：https://github.com/exodia/jsdemo/tree/master/desktop-notifications