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的常见transformation图形变化用法小结
May 13 HTML / CSS
用CSS3的box-reflect来制作倒影效果
Nov 15 HTML / CSS
CSS3常用的几种颜色渐变模式总结
Nov 18 HTML / CSS
css3实现冲击波效果的示例代码
Jan 11 HTML / CSS
CSS实现雨滴动画效果的实例代码
Oct 08 HTML / CSS
详解css3中dispaly的Grid布局与Flex布局
Sep 11 HTML / CSS
HTML5 本地存储实现购物车功能
Sep 07 HTML / CSS
HTML5地理定位实例
Oct 15 HTML / CSS
HTML5中使用postMessage实现两个网页间传递数据
Jun 22 HTML / CSS
HTML5添加禁止缩放功能
Nov 03 HTML / CSS
详解如何通过H5(浏览器/WebView/其他)唤起本地app
Dec 11 HTML / CSS
CSS元素定位之通过元素的标签或者元素的id、class属性定位详解
Sep 23 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设计模式 Decorator(装饰模式)
2011/06/26 PHP
PHP处理JSON字符串key缺少双引号的解决方法
2014/09/16 PHP
PHP中new static() 和 new self() 的区别介绍
2015/01/09 PHP
PHP人民币金额转大写实例代码
2015/10/02 PHP
php性能分析之php-fpm慢执行日志slow log用法浅析
2016/10/17 PHP
php array_merge_recursive 数组合并
2016/10/26 PHP
php实现的简单中文验证码功能示例
2017/01/03 PHP
PHP编程实现多维数组按照某个键值排序的方法小结【2种方法】
2017/04/27 PHP
Yii框架参数化查询中IN查询只能查询一个的解决方法
2017/05/20 PHP
thinkPHP5.1框架路由::get、post请求简单用法示例
2019/05/06 PHP
jQuery :first选择器使用介绍
2013/08/09 Javascript
jquery中的过滤操作详细解析
2013/12/02 Javascript
jquery制作搜狐快站页面效果示例分享
2014/02/21 Javascript
jquery不常用方法汇总
2015/07/26 Javascript
详解如何使用webpack在vue项目中写jsx语法
2017/11/08 Javascript
Node.js原生api搭建web服务器的方法步骤
2019/02/15 Javascript
细说webpack6 Babel的使用详解
2019/09/26 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
2020/05/09 Javascript
微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法
2020/05/19 Javascript
[01:02:32]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第二场 2月26日
2021/03/11 DOTA
python实现ip查询示例
2014/03/26 Python
说一说Python logging
2016/04/15 Python
Python算法之求n个节点不同二叉树个数
2017/10/27 Python
python实现将一个数组逆序输出的方法
2018/06/25 Python
python pprint模块中print()和pprint()两者的区别
2020/02/10 Python
HTML5中的websocket实现直播功能
2018/05/21 HTML / CSS
ZWILLING双立人法国网上商店:德国刀具锅具厨具品牌
2019/08/28 全球购物
什么是serialVersionUID
2016/03/04 面试题
升职演讲稿范文
2014/05/23 职场文书
2014年六一儿童节演讲稿
2014/05/23 职场文书
省级优秀毕业生主要事迹
2014/05/29 职场文书
大学生联谊活动策划书(光棍节)
2014/10/10 职场文书
先进个人评语大全
2015/01/04 职场文书
员工升职自荐信
2015/03/27 职场文书
毕业论文答辩演讲稿
2015/06/23 职场文书
实现AJAX异步调用和局部刷新的基本步骤
2022/03/17 Javascript