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动画效果之animation的常用样式
Mar 09 HTML / CSS
利用css3制作3D样式按钮实现代码
Mar 18 HTML / CSS
几个CSS3的flex弹性盒模型布局的简单例子演示
May 12 HTML / CSS
CSS3按钮鼠标悬浮实现光圈效果源码
Sep 11 HTML / CSS
深入理解css中vertical-align属性
Apr 18 HTML / CSS
浅谈css3新单位vw、vh、vmin、vmax的使用详解
Dec 01 HTML / CSS
使用纯 CSS 创作一个脉动 loader效果的源码
Sep 28 HTML / CSS
详解HTML5 LocalStorage 本地存储
Dec 23 HTML / CSS
Data URI scheme详解和使用实例及图片base64编码实现方法
May 08 HTML / CSS
HTML5各种头部meta标签的功能(推荐)
Mar 13 HTML / CSS
HTML5的Video标签有部分MP4无法播放的问题解析(多图)
Aug 18 HTML / CSS
CSS3 制作精美的定价表
Apr 06 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制作静态网站的模板框架(四)
2006/10/09 PHP
php Mysql日期和时间函数集合
2007/11/16 PHP
控制PHP的输出:缓存并压缩动态页面
2013/06/11 PHP
ThinkPHP模板IF标签用法详解
2014/07/01 PHP
作为程序员必知的16个最佳PHP库
2015/12/09 PHP
CI分页类首页、尾页不显示的解决方法
2016/03/28 PHP
阿里云PHP SMS短信服务验证码发送方法
2017/07/11 PHP
用javascript动态调整iframe高度的方法
2007/03/06 Javascript
用js实现的页面关键字密度查询代码
2007/12/27 Javascript
javascript arguments 传递给函数的隐含参数
2009/08/21 Javascript
Jquery的hide及toggle方法让超链接慢慢消失
2013/09/06 Javascript
深入理解JavaScript单体内置对象
2016/06/06 Javascript
AngularJS入门教程之数据绑定原理详解
2016/11/02 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
2017/02/10 Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
2017/02/16 Javascript
jQuery插件artDialog.js使用与关闭方法示例
2017/10/09 jQuery
原生nodejs使用websocket代码分享
2018/04/07 NodeJs
简单的vuex 的使用案例笔记
2018/04/13 Javascript
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
2018/09/20 Javascript
koa+mongoose实现简单增删改查接口的示例代码
2019/05/13 Javascript
轻松学习JavaScript函数中的 Rest 参数
2019/05/30 Javascript
vue-cli 3 全局过滤器的实例代码详解
2019/06/03 Javascript
vue + typescript + video.js实现 流媒体播放 视频监控功能
2019/07/07 Javascript
解析vue、angular深度作用选择器
2019/09/11 Javascript
Layui事件监听的实现(表单和数据表格)
2019/10/17 Javascript
python创建只读属性对象的方法(ReadOnlyObject)
2013/02/10 Python
Python随机生成彩票号码的方法
2015/03/05 Python
Python坐标线性插值应用实现
2019/11/13 Python
css3气泡 css3关键帧动画创建的动态通知气泡
2013/02/26 HTML / CSS
Html5实现二维码扫描并解析
2016/01/20 HTML / CSS
汽车运用工程毕业生自荐信
2013/10/29 职场文书
财务部岗位职责
2013/11/19 职场文书
幼儿园毕业典礼园长致辞
2015/07/29 职场文书
新郎父母婚礼答谢词
2015/09/29 职场文书
导游词之西江千户苗寨
2019/12/24 职场文书
微信小程序和php的登录实现
2021/04/01 PHP