`
txf2004
  • 浏览: 6830990 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

使用HTML5 Notication API实现一个定时提醒工具

 
阅读更多

初识Chrome Notification API这篇博文介绍了Notification API以及chrome的实现,同时也对相关的API做了一个简单的封装,在本文中将利用封装过的API实现一个定时提醒工具。

工具的主要目的是:自己经常坐在电脑前,一坐就是好几个小时,希望有工具能够每小时提醒自己起来活动休息一会。
主要功能有:用户可以设置周期性的提醒时间,比如设置每1小时提醒一次,1小时后将弹出通知框提醒用户时间到。
其他包括:用户能够设置对话框的持续时间,比如持续15秒,15秒后对话框消失,以及提醒内容等。


HTML&CSS

首先先创建基本的HTML结构如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>时间提醒</title>
		<style>
			div {
				margin:40px 15px;
			}
			
			#main {				
				margin:0 auto;
				width:360px;
				border: 2px solid green;
			}
			
			.operation {
				text-align:center;
			}
			
		</style>
	</head>
	<body>
		<div id="main">
		<div><label for="interval">设置时间间隔(分):<input id="interval" type="number" value="60" /></label></div>
		<div><label for="duration">弹窗持续时间(分):<input id="duration" type="number"  value="1" /></label></div>
		<div><label for="content">设置提醒消息:<textarea id="content" >你已经做了很久啦,让眼睛放松放松吧~~!</textarea></label></div>
		<div class="operation">
			<input type="button" value="开始" id="start" />
			<input type="button" value="停止" id="stop" />
		</div>
		</div>
		<script src="desktopNotify.js"></script>
		<script src="desktop-notification.js"></script>
	</body>
</html>

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

完整的源码请访问:https://github.com/Exodia/jsdemo/tree/master/desktop-notifications



分享到:
评论

相关推荐

    Android项目源码带桌面工具的课程表程序.zip

    本项目是一个简单安卓的课表程序源码,内容及构造都较为简单,比刚发的这个记事本项目(http://www.javaapk.com/source/8634.html)涉及到的知识要多一些,但是作者打的注释很到位。80%以上的代码段都有注释,除了...

    Android项目源码带桌面工具的课程表程序

    本项目是一个简单安卓的课表程序源码,内容及构造都较为简单,比刚发的这个记事本项目(http://www./source/8634.html)涉及到的知识要多一些,但是作者打的注释很到位。80%以上的代码段都有注释,除了基础的...

    带桌面工具的课程表源码.zip

    带桌面工具的课程表源码是一个简单安卓的课表程序源码,内容及构造都较为简单。80%以上的代码段都有注释,除了基础的ListView和Sqlite还用到了通知服务(Notication)和桌面小插件(appwidget)的技术。  

    带桌面工具的课程表

    带桌面工具的课程表源码是一个简单安卓的课表程序源码,内容及构造都较为简单。80%以上的代码段都有注释,除了基础的ListView和Sqlite还用到了通知服务(Notication)和桌面小插件(appwidget)的技术。

    ISO_IEC_10967-1_2012.pdf IPart 1

    6.4 User selection of alternative for notication . . . . . . . . . . . . . . . . . . . . . . 39 7 Relationship with language standards 39 8 Documentation requirements 41 Annex A (informative) Partial ...

    android史上最全通知操作(Notification)

    android中的通知功能,notification最全操作,简单易懂好操作,可以正常运行,有问题,请留言

Global site tag (gtag.js) - Google Analytics