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 相关文章推荐
CSS+jQuery实现的在线答题功能
Apr 25 HTML / CSS
详解CSS3的opacity属性设置透明效果的用法
May 09 HTML / CSS
CSS3 :default伪类选择器使用简介
Mar 15 HTML / CSS
使用 CSS3 中@media 实现网页自适应的示例代码
Mar 24 HTML / CSS
css3 flex实现div内容水平垂直居中的几种方法
Mar 27 HTML / CSS
基于CSS3的animation属性实现微信拍一拍动画效果
Jun 22 HTML / CSS
详解Html5微信支付爬坑之路
Jul 24 HTML / CSS
让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)
Apr 08 HTML / CSS
解析HTML5中的新功能本地存储localStorage
Mar 01 HTML / CSS
html5实现滑块功能之type=&quot;range&quot;属性
Feb 18 HTML / CSS
萌新的HTML5 入门指南
Nov 06 HTML / CSS
HTML+CSS实现导航条下拉菜单的示例代码
Aug 02 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程序实现支持页面后退的两种方法
2008/06/30 PHP
php数组函数序列之ksort()对数组的元素键名进行升序排序,保持索引关系
2011/11/02 PHP
PHP面向对象精要总结
2014/11/07 PHP
yiic命令时提示“php.exe”不是内部或外部命令的解决方法
2014/12/18 PHP
php实现的数字验证码及数字运算验证码
2015/07/30 PHP
php实现的后台表格分页功能示例
2017/10/23 PHP
js资料prototype 属性
2007/03/13 Javascript
bgsound 背景音乐 的一些常用方法及特殊用法小结
2010/05/11 Javascript
Javascript new关键字的玄机 以及其它
2010/08/25 Javascript
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
2013/04/07 Javascript
JavaScript运行机制之事件循环(Event Loop)详解
2014/10/10 Javascript
js 左右悬浮对联广告特效代码
2014/12/12 Javascript
js实现缓冲运动效果的方法
2015/04/10 Javascript
JavaScript函数节流和函数防抖之间的区别
2017/02/15 Javascript
JavaScript实现body内任意节点的自定义属性功能示例
2017/09/18 Javascript
JavaScript变量作用域及内存问题实例分析
2019/06/10 Javascript
前端使用crypto.js进行加密的函数代码
2020/08/16 Javascript
Python基于DES算法加密解密实例
2015/06/03 Python
使用python编写简单的小程序编译成exe跑在win10上
2018/01/15 Python
Python温度转换实例分析
2018/01/17 Python
Django项目后台不挂断运行的方法
2019/08/31 Python
Python 实现自动完成A4标签排版打印功能
2020/04/09 Python
美国生鲜及杂货电商:FreshDirect
2018/01/29 全球购物
英国排名第一的宠物店:PetPlanet
2020/02/02 全球购物
linux面试题参考答案(10)
2016/10/26 面试题
中间件分为哪几类
2012/03/14 面试题
大学本科生的个人自我评价
2013/12/09 职场文书
计算机相关的自我评价
2014/01/15 职场文书
家长给学校的建议书
2014/05/15 职场文书
机械设计制造及其自动化专业求职信
2014/06/17 职场文书
文秘班元旦晚会活动策划方案
2014/08/28 职场文书
个人年终总结结尾
2015/03/06 职场文书
离开雷锋的日子观后感
2015/06/09 职场文书
2015秋季开学典礼新闻稿
2015/07/17 职场文书
2016教师学习党章心得体会
2016/01/15 职场文书
Python IO文件管理的具体使用
2022/03/20 Python