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去掉A标签(链接)虚线框的方法
Apr 01 HTML / CSS
利用CSS3制作简单的3d半透明立方体图片展示
Mar 25 HTML / CSS
css3实现圆锥渐变conic-gradient效果
Feb 12 HTML / CSS
浅谈three.js中的needsUpdate的应用
Nov 12 HTML / CSS
HTML5 canvas画图并保存成图片的jcanvas插件
Jan 17 HTML / CSS
html5摇一摇代码优化包括DeviceMotionEvent等等
Sep 01 HTML / CSS
巧用HTML5给按钮背景设计不同的动画简单实例
Aug 09 HTML / CSS
使用HTML5 Geolocation实现一个距离追踪器
Apr 09 HTML / CSS
HTML5 Blob 实现文件下载功能的示例代码
Nov 29 HTML / CSS
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
Mar 17 HTML / CSS
基于HTML5+tracking.js实现刷脸支付功能
Apr 16 HTML / CSS
sass 常用备忘案例详解
Sep 15 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定时执行任务实现方法详解(Timer)
2015/07/30 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
动态加载图片路径 保持JavaScript控件的相对独立性
2010/09/06 Javascript
使用基于jquery的gamequery插件做JS乒乓球游戏
2011/07/31 Javascript
fancybox modal的完美解决(右上的X)
2012/10/30 Javascript
JavaScript判断密码强度(自写代码)
2013/09/06 Javascript
Javascript实现页面跳转的几种方式分享
2013/10/26 Javascript
jquery ajax传递中文参数乱码问题及解决方法说明
2014/02/07 Javascript
jQuery圆形统计图开发实例
2015/01/04 Javascript
常用DOM整理
2015/06/16 Javascript
JS基于cookie实现来宾统计记录访客信息的方法
2015/08/04 Javascript
JS生成不重复的随机数组的简单实例
2016/07/10 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
2017/12/14 Javascript
详解使用angular框架离线你的应用(pwa指南)
2019/01/31 Javascript
ES6基础之展开语法(Spread syntax)
2019/02/21 Javascript
vue+Element实现搜索关键字高亮功能
2019/05/28 Javascript
node爬取新型冠状病毒的疫情实时动态
2020/02/06 Javascript
Python脚本文件打包成可执行文件的方法
2015/06/02 Python
python实现搜索本地文件信息写入文件的方法
2016/02/22 Python
Python实现简单的获取图片爬虫功能示例
2017/07/12 Python
浅谈Tensorflow模型的保存与恢复加载
2018/04/26 Python
python 保存float类型的小数的位数方法
2018/10/17 Python
python 多个参数不为空校验方法
2019/02/14 Python
python生成器推导式用法简单示例
2019/10/08 Python
python集合的创建、添加及删除操作示例
2019/10/08 Python
华纳兄弟工作室的官方授权商店:WB Shop
2018/11/30 全球购物
静态变量和实例变量的区别
2015/07/07 面试题
国际商务专业职业生涯规划书范文
2014/01/17 职场文书
电子银行营销方案
2014/02/22 职场文书
《北大荒的秋天》教学反思
2014/04/14 职场文书
赡养老人协议书
2014/04/21 职场文书
2014年助理政工师工作总结
2014/12/19 职场文书
自荐信格式范文
2015/03/04 职场文书
2015年幼儿园学前班工作总结
2015/05/18 职场文书
入党积极分子考察意见
2015/06/02 职场文书
同事离别感言
2015/08/04 职场文书