HTML5 Notification(桌面提醒)功能使用实例


Posted in HTML / CSS onMarch 17, 2014

一、HTML5 Notification 简介
HTML5 Notification ,即桌面通知。目前浏览器依然是一个严格的沙盒工作模式,这种模式把浏览器和桌面的通信隔离开。Notification可以跨越沙盒能够让浏览器即使是最小化状态也能将消息通知给用户。
二、桌面提醒API

复制代码
代码如下:
window.webkitNotifications

该API有3个方法:
复制代码
代码如下:
requestPermission 请求桌面通知
checkPermission 检查桌面通知许可(PERMISSION_ALLOWED = 0, PERMISSION_NOT_ALLOWED = 1, PERMISSION_DENIED = 2)
createNotification 创建桌面通知

三、桌面通知实例
下面让我们用该桌面通知API写个小功能:每隔20分钟在桌面发一个消息来提醒用户休息一下。
代码如下:
复制代码
代码如下:
if(window.webkitNotifications){
if(window.webkitNotifications.checkPermission()==0){
setInterval(function(){
var popup = window.webkitNotifications.createNotification("avator.jpg","如花温馨提醒:","长时间面对电脑眼睛会瞎的,休息一下~!");
popup.show();
},1000 * 60 * 20);</p> <p> }else{
window.webkitNotifications.requestPermission();
}
}else{
alert('浏览器不支持桌面通知~!');
}

然后20分钟之后桌面就会出现:
HTML5 Notification(桌面提醒)功能使用实例

HTML / CSS 相关文章推荐
需要知道的CSS3动画技术
Jan 01 HTML / CSS
一款利用css3的鼠标经过动画显示详情特效的实例教程
Dec 29 HTML / CSS
CSS3 box-shadow属性实例详解
Jun 19 HTML / CSS
使用HTML5 Canvas API中的clip()方法裁剪区域图像
Mar 25 HTML / CSS
html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形
Jan 09 HTML / CSS
html5各种页面切换效果和模态对话框用法总结
Dec 15 HTML / CSS
详解HTML5 window.postMessage与跨域
May 11 HTML / CSS
canvas压缩图片以及卡片制作的方法示例
Dec 04 HTML / CSS
详解canvas绘制网络字体几种方法
Aug 27 HTML / CSS
html5手机键盘弹出收起的处理
Jan 20 HTML / CSS
HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手
May 10 HTML / CSS
MIME类型中application/xml与text/xml的区别介绍
Jan 18 HTML / CSS
让IE9以下版本的浏览器兼容HTML5的方法
Mar 12 #HTML / CSS
HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影
Mar 07 #HTML / CSS
HTML5中新标签和常用标签详解
Mar 07 #HTML / CSS
html5的websockets全双工通信详解学习示例
Feb 26 #HTML / CSS
HTML5+CSS3应用详解
Feb 24 #HTML / CSS
html5中valid、invalid、required的定义
Feb 21 #HTML / CSS
html5实现多文件的上传示例代码
Feb 13 #HTML / CSS
You might like
php empty函数 使用说明
2009/08/10 PHP
php实现自动获取生成文章主题关键词功能的深入分析
2013/06/03 PHP
PHP rawurlencode与urlencode函数的深入分析
2013/06/08 PHP
php轻量级的性能分析工具xhprof的安装使用
2015/08/12 PHP
java模拟PHP的pack和unpack类
2016/04/13 PHP
yii2 数据库读写分离配置示例
2017/02/10 PHP
jQuery(非HTML5)可编辑表格实现代码
2012/12/11 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器
2013/06/21 Javascript
如何使用Javascript正则表达式来格式化XML内容
2013/07/04 Javascript
每天一篇javascript学习小结(String对象)
2015/11/18 Javascript
JS跨域解决方案之使用CORS实现跨域
2016/04/14 Javascript
原生js三级联动的简单实现代码
2016/06/07 Javascript
JavaScript实现in-place思想的快速排序方法
2016/08/07 Javascript
使用D3.js创建物流地图的示例代码
2018/01/27 Javascript
原生JS封装_new函数实现new关键字的功能
2018/08/12 Javascript
python连接mysql数据库示例(做增删改操作)
2013/12/31 Python
python基于urllib实现按照百度音乐分类下载mp3的方法
2015/05/25 Python
python爬虫实战之爬取京东商城实例教程
2017/04/24 Python
Python实现好友全头像的拼接实例(推荐)
2017/06/24 Python
Python 多进程并发操作中进程池Pool的实例
2017/11/01 Python
Python获取当前函数名称方法实例分享
2018/01/18 Python
Python openpyxl 遍历所有sheet 查找特定字符串的方法
2018/12/10 Python
简单易懂Pytorch实战实例VGG深度网络
2019/08/27 Python
python用类实现文章敏感词的过滤方法示例
2019/10/27 Python
美国围栏公司:Walpole Outdoors
2019/11/19 全球购物
外企办公室竞聘演讲稿
2013/12/29 职场文书
大型营销活动计划书
2014/04/28 职场文书
酒店管理毕业生自荐信
2014/05/25 职场文书
品质标语大全
2014/06/21 职场文书
小学标准化建设汇报材料
2014/08/16 职场文书
纪检干部先进事迹材料
2014/08/23 职场文书
幼儿园六一儿童节活动方案
2014/08/26 职场文书
2014年学习厉行节约反对浪费思想汇报
2014/09/10 职场文书
小组口号霸气押韵
2015/12/24 职场文书
bat批处理之字符串操作的实现
2022/03/16 Python
使用CSS实现黑白格背景效果
2022/06/01 HTML / CSS