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 30 HTML / CSS
你应该知道的30个css选择器
Mar 19 HTML / CSS
CSS3实现时间轴效果
Jul 11 HTML / CSS
HTML5本地存储之Web Storage应用介绍
Jan 06 HTML / CSS
html特殊符号示例 html特殊字符编码对照表
Jan 14 HTML / CSS
解决html5中video标签无法播放mp4问题的办法
May 07 HTML / CSS
html5 figure和figcaption的使用方法
Sep 10 HTML / CSS
浅析HTML5中的download属性使用
Mar 13 HTML / CSS
HTML5 播放 RTSP 视频的实例代码
Jul 29 HTML / CSS
video.js支持m3u8格式直播的实现示例
May 20 HTML / CSS
一个基于canvas的移动端图片编辑器的实现
Oct 28 HTML / CSS
Canvas获取视频第一帧缩略图的实现
Nov 11 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
mysql5的sql文件导入到mysql4的方法
2008/10/19 PHP
PHP面向对象之旅:深入理解static变量与方法
2014/01/06 PHP
打开超链需要“确认”对话框的方法
2007/03/08 Javascript
JS input 数字验证代码
2009/07/30 Javascript
jQuery Migrate 1.1.0 Released 注意事项
2014/06/14 Javascript
javascript实现画不相交的圆
2015/04/07 Javascript
jQuery中$.extend()用法实例
2015/06/24 Javascript
学习Bootstrap组件之下拉菜单
2015/07/28 Javascript
js焦点文字滚动效果代码分享
2015/08/25 Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
2015/10/22 Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
2016/12/16 Javascript
前端js弹出框组件使用方法
2020/08/24 Javascript
JavaScript获取select中text值的方法
2017/02/13 Javascript
javascript实现blob加密视频源地址的方法
2019/08/08 Javascript
JavaScript中的this/call/apply/bind的使用及区别
2020/03/06 Javascript
使用Python压缩和解压缩zip文件的教程
2015/05/06 Python
Python爬虫使用脚本登录Github并查看信息
2018/07/16 Python
python取数作为临时极大值(极小值)的方法
2018/10/15 Python
python实现对任意大小图片均匀切割的示例
2018/12/05 Python
python 利用turtle库绘制笑脸和哭脸的例子
2019/11/23 Python
Python while循环使用else语句代码实例
2020/02/07 Python
基于python 取余问题(%)详解
2020/06/03 Python
Python调用REST API接口的几种方式汇总
2020/10/19 Python
将不规则的Python多维数组拉平到一维的方法实现
2021/01/11 Python
美国50岁以上单身人士约会平台:SilverSingles
2018/06/29 全球购物
新西兰优惠网站:Treat Me
2019/07/04 全球购物
Farah官方网站:男士服装及配件
2019/11/01 全球购物
气象学专业个人求职信
2014/03/15 职场文书
师范生自荐信模板
2014/05/28 职场文书
节能环保标语
2014/06/12 职场文书
团日活动总结模板
2014/06/25 职场文书
廉洁自律承诺书2015
2015/01/22 职场文书
2016中学教师读书心得体会
2016/01/13 职场文书
导游词之白茶谷九龙峡
2019/10/23 职场文书
教你利用Selenium+python自动化来解决pip使用异常
2021/05/20 Python
Redisson实现Redis分布式锁的几种方式
2021/08/07 Redis