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 3D制作实战案例分析
Sep 18 HTML / CSS
纯HTML5+CSS3制作图片旋转
Jan 12 HTML / CSS
CSS3中的常用选择器使用示例整理
Jun 13 HTML / CSS
html5 拖拽上传图片实例演示
Apr 01 HTML / CSS
HTML5 Canvas——用路径描画线条实例介绍
Jun 09 HTML / CSS
html5教程调用绘图api画简单的圆形代码分享
Dec 04 HTML / CSS
HTML5 3D衣服摇摆动画特效
Mar 17 HTML / CSS
html5自定义video标签的海报与播放按钮功能
Dec 04 HTML / CSS
HTML5图片层叠的实现示例
Jul 07 HTML / CSS
前端水印的简单实现代码示例
Dec 02 HTML / CSS
CSS 新特性 contain控制页面的重绘与重排问题
Apr 30 HTML / CSS
css3中transform属性实现的4种功能
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
php 全文搜索和替换的实现代码
2008/07/29 PHP
php SQL之where语句生成器
2009/03/24 PHP
PHP获取网页标题的3种实现方法代码实例
2014/04/11 PHP
PHP中spl_autoload_register()和__autoload()区别分析
2014/05/10 PHP
php类常量用法实例分析
2015/07/09 PHP
php获取图片信息的方法详解
2015/12/10 PHP
详解PHP处理密码的几种方式
2016/11/30 PHP
Laravel框架实现的rbac权限管理操作示例
2019/01/16 PHP
laravel中Redis队列监听中断的分析
2020/09/14 PHP
JS date对象的减法处理实现代码
2010/12/28 Javascript
javascript基础之查找元素的详细介绍(访问节点)
2013/07/05 Javascript
JavaScript限定复选框的选择个数示例代码
2013/08/25 Javascript
深入理解JQuery keyUp和keyDown的区别
2013/12/12 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
2014/08/12 Javascript
JavaScript中获取鼠标位置相关属性总结
2014/10/11 Javascript
javascript实现禁止复制网页内容
2014/12/16 Javascript
微信小程序 支付简单实例及注意事项
2017/01/06 Javascript
从零开始学习Node.js系列教程三:图片上传和显示方法示例
2017/04/13 Javascript
vue组件父子间通信详解(三)
2017/11/07 Javascript
vue-cli扩展多模块打包的示例代码
2018/04/09 Javascript
javascript合并两个数组最简单的实现方法
2019/09/14 Javascript
vue+ts下对axios的封装实现
2020/02/18 Javascript
举例讲解Python中的list列表数据结构用法
2016/03/12 Python
Python实现分段线性插值
2018/12/17 Python
使用python实现unix2dos和dos2unix命令的例子
2019/08/13 Python
python实现图像拼接
2020/03/05 Python
Python虚拟环境的创建和包下载过程分析
2020/06/19 Python
西班牙自行车和跑步商店:Alltricks
2018/07/07 全球购物
美国爆米花工厂:The Popcorn Factory
2019/09/14 全球购物
英国著名药妆店:Superdrug
2021/02/13 全球购物
运动会广播稿100字
2014/01/11 职场文书
节能环保家庭事迹材料
2014/08/27 职场文书
经理助理岗位职责
2015/02/02 职场文书
幼儿园亲子活动通知
2015/04/24 职场文书
2016年小学推普宣传周活动总结
2016/04/06 职场文书
新手初学Java网络编程
2021/07/07 Java/Android