使用HTML5 Notication API实现一个定时提醒工具-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 17, 2016 am 09:08 AM

   在本文中将利用封装过的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

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

How do I use viewport meta tags to control page scaling on mobile devices?Mar 13, 2025 pm 08:00 PM

The article discusses using viewport meta tags to control page scaling on mobile devices, focusing on settings like width and initial-scale for optimal responsiveness and performance.Character count: 159

How to Add Audio to My HTML5 Website?Mar 10, 2025 pm 03:01 PM

This article explains how to embed audio in HTML5 using the <audio> element, including best practices for format selection (MP3, Ogg Vorbis), file optimization, and JavaScript control for playback. It emphasizes using multiple audio f

How to Create Interactive Games with HTML5 and JavaScript?Mar 10, 2025 pm 06:34 PM

This article details creating interactive HTML5 games using JavaScript. It covers game design, HTML structure, CSS styling, JavaScript logic (including event handling and animation), and audio integration. Essential JavaScript libraries (Phaser, Pi

How do I handle user location privacy and permissions with the Geolocation API?Mar 18, 2025 pm 02:16 PM

The article discusses managing user location privacy and permissions using the Geolocation API, emphasizing best practices for requesting permissions, ensuring data security, and complying with privacy laws.

How to Use HTML5 Forms for User Input?Mar 10, 2025 pm 02:59 PM

This article explains how to create and validate HTML5 forms. It details the <form> element, input types (text, email, number, etc.), and attributes (required, pattern, min, max). The advantages of HTML5 forms over older methods, incl

How do I use the HTML5 Page Visibility API to detect when a page is visible?Mar 13, 2025 pm 07:51 PM

The article discusses using the HTML5 Page Visibility API to detect page visibility, improve user experience, and optimize resource usage. Key aspects include pausing media, reducing CPU load, and managing analytics based on visibility changes.

How do I use the HTML5 Drag and Drop API for interactive user interfaces?Mar 18, 2025 pm 02:17 PM

The article explains how to use the HTML5 Drag and Drop API to create interactive user interfaces, detailing steps to make elements draggable, handle key events, and enhance user experience with custom feedback. It also discusses common pitfalls to a

How do I use the HTML5 WebSockets API for bidirectional communication between client and server?Mar 12, 2025 pm 03:20 PM

This article explains the HTML5 WebSockets API for real-time, bidirectional client-server communication. It details client-side (JavaScript) and server-side (Python/Flask) implementations, addressing challenges like scalability, state management, an

See all articles

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Best Graphic Settings

3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle Solution

1 weeks agoByDDD

R.E.P.O. How to Fix Audio if You Can't Hear Anyone

3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Where to find the Crane Control Keycard in Atomfall

1 weeks agoByDDD

Hot Tools

SublimeText3 Chinese version

Chinese version, very easy to use

MinGW - Minimalist GNU for Windows

This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.