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实现的几个小loading效果
Sep 27 HTML / CSS
css3实现垂直下拉动画菜单示例
Apr 22 HTML / CSS
CSS3 按钮边框动画的实现
Nov 12 HTML / CSS
10种CSS3实现的loading动画,挑一个走吧?
Nov 16 HTML / CSS
html5 offlline 缓存使用示例
Jun 24 HTML / CSS
HTML5语音识别标签写法附图
Nov 18 HTML / CSS
HTML5中判断横屏竖屏的方法(移动端)
Aug 04 HTML / CSS
HTML5新增属性data-*和js/jquery之间的交互及注意事项
Aug 08 HTML / CSS
wordpress添加Html5的表单验证required方法小结
Aug 18 HTML / CSS
Canvas获取视频第一帧缩略图的实现
Nov 11 HTML / CSS
css3实现背景图片半透明内容不透明的方法示例
Apr 13 HTML / CSS
css样式important规则的正确使用方式
Jun 10 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
yii框架源码分析之创建controller代码
2011/06/28 PHP
使用PHP接受文件并获得其后缀名的方法
2015/08/05 PHP
PHP实现无限分类的实现方法
2016/11/14 PHP
PHP使用DOM和simplexml读取xml文档的方法示例
2017/02/08 PHP
javascript 通用简单的table选项卡实现
2010/05/07 Javascript
javascript 数据类型转换(parseInt,parseFloat)
2010/07/20 Javascript
超轻量级的基于jquery的三级展开列表
2011/04/26 Javascript
新浪微博字数统计 textarea字数统计实现代码
2011/08/28 Javascript
js替代copy(示例代码)
2013/11/27 Javascript
jQuery实现鼠标划过展示大图的方法
2015/03/09 Javascript
Javascript进制转换实例分析
2015/05/14 Javascript
jQuery实现图片上传和裁剪插件Croppie
2015/11/29 Javascript
详解JavaScript基本类型和引用类型
2015/12/09 Javascript
详解js界面跳转与值传递
2016/11/22 Javascript
jQuery插件zTree实现删除树子节点的方法示例
2017/03/08 Javascript
在node中如何使用 ES6
2017/04/22 Javascript
手写简单的jQuery雪花飘落效果实例
2018/04/22 jQuery
解决bootstrap模态框数据缓存的问题方法
2018/08/10 Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
2019/07/15 Javascript
[04:30]显微镜下的DOTA2第五期——拉比克
2013/09/26 DOTA
Python文件右键找不到IDLE打开项解决办法
2015/06/08 Python
通过Python爬虫代理IP快速增加博客阅读量
2016/12/14 Python
python opencv实现运动检测
2018/07/10 Python
Python中拆分字符串的操作方法
2019/07/23 Python
Python如何批量获取文件夹的大小并保存
2020/03/31 Python
HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述
2013/01/30 HTML / CSS
乡镇干部十八大感言
2014/02/17 职场文书
《赵州桥》教学反思
2014/02/17 职场文书
网络优化专员求职信
2014/05/04 职场文书
儿童生日会策划方案
2014/05/15 职场文书
群众路线教育查摆剖析材料
2014/10/10 职场文书
领导走群众路线整改措施思想汇报
2014/10/12 职场文书
处级干部考察材料
2014/12/24 职场文书
2015年招商引资工作总结
2015/04/25 职场文书
致三级跳运动员加油稿
2015/07/21 职场文书
Python中字符串对象语法分享
2022/02/24 Python