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 相关文章推荐
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
May 07 HTML / CSS
纯css3实现图片翻牌特效
Mar 10 HTML / CSS
CSS3实现点击放大的动画实例代码
Feb 27 HTML / CSS
html5 canvas 使用示例
Oct 22 HTML / CSS
利用HTML5画出一个坦克的形状具体实现代码
Jun 20 HTML / CSS
html5使用canvas画一条线
Dec 15 HTML / CSS
H5调用相机拍照并压缩图片的实例代码
Jul 20 HTML / CSS
LocalStorage记住用户和密码功能
Jul 24 HTML / CSS
html5.2 dialog简介详解
Feb 27 HTML / CSS
详解Canvas 跨域脱坑实践
Nov 07 HTML / CSS
萌新的HTML5 入门指南
Nov 06 HTML / CSS
css实现两栏布局,左侧固定宽,右侧自适应的多种方法
Aug 07 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
dhtmlxTree目录树增加右键菜单以及拖拽排序的实现方法
2013/04/26 PHP
php+ajax登录跳转登录实现思路
2016/07/31 PHP
javascript 构建一个xmlhttp对象池合理创建和使用xmlhttp对象
2010/01/15 Javascript
Jquery跨域获得Json时invalid label错误的解决办法
2011/01/11 Javascript
javascript基础知识大集锦(二) 推荐收藏
2011/01/13 Javascript
Javascript insertAfter() 实现函数代码
2011/10/12 Javascript
JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器
2013/12/12 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
2015/02/11 Javascript
整理JavaScript创建对象的八种方法
2015/11/03 Javascript
Markdown与Bootstrap相结合实现图片自适应属性
2016/05/04 Javascript
jQuery监听文件上传实现进度条效果的方法
2016/10/16 Javascript
浅谈js对象属性 通过点(.) 和方括号([]) 的不同之处
2016/10/29 Javascript
vue实现商城购物车功能
2017/11/27 Javascript
JavaScript生成指定范围的时间列表
2018/03/19 Javascript
Vue中Quill富文本编辑器的使用教程
2018/09/21 Javascript
jQuery实现的移动端图片缩放功能组件示例
2020/05/01 jQuery
解决vue项目运行npm run serve报错的问题
2020/10/26 Javascript
python简单程序读取串口信息的方法
2015/03/13 Python
关于反爬虫的一些简单总结
2017/12/13 Python
Python使用正则表达式获取网页中所需要的信息
2018/01/29 Python
python操作oracle的完整教程分享
2018/01/30 Python
Django ORM 查询表中某列字段值的方法
2020/04/30 Python
Python selenium环境搭建实现过程解析
2020/09/08 Python
Python通过字典映射函数实现switch
2020/11/06 Python
Python jieba库分词模式实例用法
2021/01/13 Python
仓库班组长岗位职责
2013/12/12 职场文书
计算机专业毕业生自我鉴定
2014/01/16 职场文书
打架检讨书500字
2014/01/29 职场文书
幼儿园教师节演讲稿
2014/09/03 职场文书
水利局群众路线专题民主生活会发言材料
2014/09/21 职场文书
住宿生擅自离校检讨书
2014/09/22 职场文书
2015年司法局工作总结
2015/05/22 职场文书
2015年度女工工作总结
2015/10/22 职场文书
小学生反邪教心得体会
2016/01/15 职场文书
高中班主任寄语
2019/06/21 职场文书
进阶篇之linux环境下安装MySQL数据库
2022/04/09 MySQL