html5 桌面定时提醒,使用HTML5 Notication API实现一个定时提醒工具

在初识Chrome Notification API 这篇博文介绍了Notification API以及chrome的实现，同时也对相关的API做了一个简单的封装，在本文中将利用封装过的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，后面会说到。基本的效果如下，虽然是丑陋了点- -！！

程序的逻辑比较简单，设置各个字段，点击"开始"按钮，程序开始计时，到指定时间，弹出通知框。

JavaScript

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做了一个简单的小工具，用于提醒自己不要久坐，按时休息= =！虽然界面是丑陋了点~~~ 不过效果还可以··。。