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美化表单控件全集
Jun 29 HTML / CSS
Web前端绘制0.5像素的几种方法
Aug 11 HTML / CSS
基于CSS3实现的几个小loading效果
Sep 27 HTML / CSS
css3的transition效果和transfor效果示例介绍
Oct 30 HTML / CSS
css3使网页、图片变成灰色兼容大多数浏览器
Jul 02 HTML / CSS
纯css3实现的鼠标悬停动画按钮
Dec 23 HTML / CSS
CSS3中伪元素::before和::after的用法示例
Sep 18 HTML / CSS
纯css3实现宠物小鸡实例代码
Oct 08 HTML / CSS
html标签之Object和EMBED标签详解
Jul 04 HTML / CSS
Canvas制作的下雨动画的示例
Mar 06 HTML / CSS
app内嵌H5 webview 本地缓存问题的解决
Oct 19 HTML / CSS
HTML基本元素标签介绍
Feb 28 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/11/19 PHP
php cli换行示例
2014/04/22 PHP
Laravel中使用FormRequest进行表单验证方法及问题汇总
2016/06/19 PHP
PHP在innodb引擎下快速代建全文搜索功能简明教程【基于xunsearch】
2016/10/14 PHP
php实现网页上一页下一页翻页过程详解
2019/06/28 PHP
laravel 解决路由除了根目录其他都404的问题
2019/10/18 PHP
jQuery Ajax 全解析
2009/02/08 Javascript
基于jquery自定义图片热区效果
2012/07/21 Javascript
不要使用jQuery触发原生事件的方法
2014/03/03 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
2014/08/11 Javascript
jQuery解析json格式数据简单实例
2016/01/22 Javascript
Chrome调试折腾记之JS断点调试技巧
2017/09/11 Javascript
浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
2018/12/20 Javascript
Nodejs使用archiver-zip-encrypted库加密压缩文件时报错(解决方案)
2019/11/18 NodeJs
jQuery操作动画完整实例分析
2020/01/10 jQuery
微信小程序利用for循环解决内容变更问题
2020/03/05 Javascript
国内常用的js类库大全(CDN公共库)
2020/06/24 Javascript
python中类的一些方法分析
2014/09/25 Python
对python读取zip压缩文件里面的csv数据实例详解
2019/02/08 Python
python小程序基于Jupyter实现天气查询的方法
2020/03/27 Python
Python如何使用正则表达式爬取京东商品信息
2020/06/01 Python
python pandas dataframe 去重函数的具体使用
2020/07/20 Python
python为什么要安装到c盘
2020/07/20 Python
python制作抽奖程序代码详解
2021/01/15 Python
matplotlib之属性组合包(cycler)的使用
2021/02/24 Python
BSTN意大利:德国街头和运动文化高品质商店
2020/12/22 全球购物
C,C++的几个面试题小集
2013/07/13 面试题
计算机大学生职业生涯规划书范文
2014/02/19 职场文书
学习党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
2015年司机工作总结
2015/04/23 职场文书
活动新闻稿范文
2015/07/17 职场文书
2015暑期社会实践通讯稿
2015/07/18 职场文书
python实现web邮箱扫描的示例(附源码)
2021/03/30 Python
微信小程序实现录音Record功能
2021/05/09 Javascript
【js设计模式】SOLID五大设计原则
2022/03/24 Javascript
MySQL创建管理LIST分区
2022/04/13 MySQL