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

时间：2016-02-29
       在本文中将利用封装过的API实现一个定时提醒工具。

       工具的主要目的是：自己经常坐在电脑前，一坐就是好几个小时，希望有工具能够每小时提醒自己起来活动休息一会。

       主要功能有：用户可以设置周期性的提醒时间，比如设置每1小时提醒一次，1小时后将弹出通知框提醒用户时间到。

       其他包括：用户能够设置对话框的持续时间，比如持续15秒，15秒后对话框消失，以及提醒内容等。


      HTML&CSS

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

  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8" />
  5.                 <title>时间提醒</title>
  6.                 <style>
  7.                         div {
  8.                                 margin:40px 15px;
  9.                         }
  10.                        
  11.                         #main {                               
  12.                                 margin:0 auto;
  13.                                 width:360px;
  14.                                 border: 2px solid green;
  15.                         }
  16.                        
  17.                         .operation {
  18.                                 text-align:center;
  19.                         }
  20.                        
  21.                 </style>
  22.         </head>
  23.         <body>
  24.                 <div id="main">
  25.                 <div><label for="interval">设置时间间隔（分）：<input id="interval" type="number" value="60" /></label></div>
  26.                 <div><label for="duration">弹窗持续时间（分）：<input id="duration" type="number"  value="1" /></label></div>
  27.                 <div><label for="content">设置提醒消息：<textarea id="content" >你已经做了很久啦，让眼睛放松放松吧~~！</textarea></label></div>
  28.                 <div class="operation">
  29.                         <input type="button" value="开始" id="start" />
  30.                         <input type="button" value="停止" id="stop" />
  31.                 </div>
  32.                 </div>
  33.                 <script src="desktopNotify.js"></script>
  34.                 <script src="desktop-notification.js"></script>
  35.         </body>
  36. </html>
复制代码

      desktopNotify.js是前面提到的封装过的Notification API， desktop-notification.js则是相关的业务逻辑JS，后面会说到。基本的效果如下，虽然是丑陋了点- -！！

0000.png


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

      JavaScrip

      desktopNotify.js的功能主要是对原生Notification API做一些基本封装，代码如下：

  1. //desktopNotify.js
  2. void function() {
  3.         var _instance = null,
  4.                 _permissionStatus = -1,
  5.                 _eventTable = {
  6.                         "show": 1,
  7.                         "error": 1,
  8.                         "close": 1,
  9.                         "click": 1
  10.                 };
  11.        
  12.        
  13.         /**
  14.          *调用例子：
  15.          * var DN = window.XX.DesktopNotify;
  16.          * DN.requestPermission(function(){
  17.          *           DN.show("http://xxx", "hello", "world");
  18.          * });
  19.          */       
  20.         var DesktopNotify = {
  21.                
  22.                 /**
  23.                  *检测是否支持Notification，支持返回true
  24.                  */
  25.                 isSupport : function() {
  26.                         return 'Notification' in window || 'webkitNotifications' in window;
  27.                 },

  29.                 /**
  30.                  *弹出一个文本桌面通知
  31.                  *
  32.                  * @param {String} iconURL:图标资源
  33.                  * @param {String} title: 标题
  34.                  * @param {String} content: 内容
  35.                  */
  36.                 show : function(iconURL, title, content) {
  37.                         _instance = this.create(iconURL, title, content);
  38.                         _instance.show();
  39.                 },

  41.                
  42.                 /**
  43.                  *弹出一个 HTML桌面通知
  44.                  *
  45.                  * @param {String} url:html链接资源
  46.                  */
  47.                 showHTML : function(url) {
  48.                         _instance = this.createHTML(url);
  49.                         _instance.show();
  50.                 },

  52.                 /***
  53.                  * 关闭一个桌面通知
  54.                  *
  55.                  * @param {Object} cb： 隐藏后的回调函数
  56.                  *
  57.                  */
  58.                 hide : function(cb) {
  59.                         _instance && _instance.close();
  60.                         cb && cb();
  61.                 },
  62.                
  63.                 /**
  64.                  * 释放通知对话框引用
  65.                  */
  66.                 destroy: function() {
  67.                         _instance = null,
  68.                         _permissionStatus = -1;
  69.                 },

  71.                 /**
  72.                  * 检查权限状态
  73.                  * @return {Number}: 0为允许，1为不允许， 2为禁止
  74.                  */
  75.                 checkPermission : function() {
  76.                         return _permissionStatus = webkitNotifications.checkPermission();
  77.                 },
  78.                
  79.                 /**
  80.                  * 检查是否得到授权
  81.                  * @return {Boolean}： true表示得到授权
  82.                  */
  83.                 isPermitted: function() {
  84.                         return this.checkPermission() === 0;
  85.                 },
  86.                
  87.                
  88.                 /**
  89.                  * 请求授权
  90.                  * @param {Object} cb：得到授权后的回调函数
  91.                  */
  92.                 requestPermission: function(cb) {
  93.                         if(this.isPermitted()) {
  94.                                 cb && cb();
  95.                         } else {
  96.                                 webkitNotifications.requestPermission(cb);
  97.                         }
  98.                 },
  99.                
  100.                 /**
  101.                  * 创建一个文本性质的通知对话框，但不展示
  102.                  * @param {Object} iconURL
  103.                  * @param {Object} title
  104.                  * @param {Object} content
  105.                  * @return {Object} Notification实例
  106.                  */
  107.                 create: function(iconURL, title, content) {
  108.                         return webkitNotifications.createNotification(iconURL, title, content);
  109.                 },
  110.                
  111.                 /**
  112.                  * 创建一个HTML性质的通知对话框，但不展示
  113.                  * @param {Object} url: 指向html页面的链接
  114.                  * @return {Object} Notification实例
  115.                  */
  116.                 createHTML: function(url) {
  117.                         return webkitNotifications.createHTMLNotification(url);
  118.                 },
  119.                
  120.                 /**
  121.                  * 添加事件监听函数
  122.                  * @param {Object} type: 事件类型
  123.                  * @param {Object} fn: 监听函数
  124.                  */
  125.                 on: function(type, fn) {
  126.                         _eventTable[type] && _instance && _instance.addEventListener(type, fn, false);
  127.                 },
  128.                
  129.                 /**
  130.                  * 移除事件监听函数
  131.                  * @param {Object} type: 事件类型
  132.                  * @param {Object} fn: 监听函数
  133.                  */
  134.                 un: function(type, fn) {
  135.                                 _eventTable[type] && _instance && _instance.removeEventListener(type, fn, false);
  136.                 }
  137.         };

  139.         window.XX || (window.XX = {});
  140.         window.XX.DesktopNotify = DesktopNotify;
  141. }();
复制代码

      desktop-notification.js则是业务代码，如下：

  1. //desktop-notification.js
  2. void function() {
  3.     var TITLE = '时间到啦~~！亲！！',
  4.             //图标路径
  5.         ICONURL = 'icon.png';

  7.     var DN = window.XX.DesktopNotify;

  9.    /**
  10.     * 通知函数，根据设置的时间间隔，周期的弹出通知框
  11.     */
  12.     function notify(content, duration) {
  13.         DN.show(ICONURL, TITLE, content);
  14.         setTimeout(function() {
  15.             DN.hide();
  16.         }, duration);
  17.     }

  19.     if (!DN.isSupport()) {
  20.         alert('浏览器不支持桌面通知！');
  21.         return;
  22.     }

  24.     var startEl = document.getElementById('start'),//开始按钮
  25.         stopEl = document.getElementById('stop'),//停止按钮
  26.         intervalEl = document.getElementById('interval'),//提醒时间间隔输入框
  27.         contentEl = document.getElementById('content'),//提醒内容输入框
  28.         durEl = document.getElementById('duration'),//通知框持续时间输入框
  29.         timer = null;

  31.     startEl.addEventListener('click', function(evt) {
  32.         /**
  33.          * 点击“开始”，先申请用户授权，经过授权后，获取相关的提醒时间间隔，以及内容，周期的调用notify函数弹出通知框
  34.          */
  35.         DN.requestPermission(function() {
  36.             timer = setInterval(notify, intervalEl.value * 60 * 1000, contentEl.value, durEl.value * 60 * 1000);
  37.             startEl.disabled = true;
  38.         });
  39.     }, false);

  41.     stopEl.addEventListener('click', function(evt) {
  42.         /**
  43.          * 点击“停止”，清除周期调用
  44.          */
  45.         clearInterval(timer);
  46.         startEl.disabled = false;
  47.     }, false);
  48. }();
复制代码

      运行效果

      注意，网页必须在HTTP或HTTPS协议下打开，而不能直接用File协议打开，否则无法运行（若用户设置了浏览器接收任何通知，倒是可以直接打开运行）。运行的效果如下：

000.png


      即便当浏览器最小化，或者未在高亮状态，通知框一样会定时弹出。

      总结

      在本文中，利用了HTML5 Notification做了一个简单的小工具，用于提醒自己不要久坐，按时休息= =！虽然界面是丑陋了点，不过效果还可以。


完整代码点击：https://github.com/Exodia/jsdemo/tree/master/desktop-notifications


上一篇：HTML5画布下js的文字云/标签云效果 - D3 Cloud 下一篇：使用HTML5技术开发的超酷颜色选择器

相关文章

最新文章

Copyright © 2022-2023 HTML5模板网 版权所有并保留所有权