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兼容性问题及一些常见问题汇总
May 03 HTML / CSS
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
Jul 08 HTML / CSS
浅谈CSS3特性查询(Feature Query: @supports)功能简介
Jul 31 HTML / CSS
浅谈CSS3中的变形功能-transform功能
Dec 27 HTML / CSS
CSS3 旋转立方体问题详解
Jan 09 HTML / CSS
canvas绘制表情包的示例代码
Jul 09 HTML / CSS
HTML5对比HTML4的主要改变和改进总结
May 27 HTML / CSS
HTML5如何使用SVG的方法示例
Jan 11 HTML / CSS
HTML5语义化元素你真的用对了吗
Aug 22 HTML / CSS
HTML5 weui使用笔记
Nov 21 HTML / CSS
在html页面中取得session中的值的方法
Aug 11 HTML / CSS
纯CSS实现一个简单步骤条的示例代码
Jul 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 FPDF类库应用实现代码
2009/03/20 PHP
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.3
2008/03/22 Javascript
ExtJS 2.0实用简明教程之应用ExtJS
2009/04/29 Javascript
javascript 用记忆函数快速计算递归函数
2010/03/15 Javascript
jQuery MD5加密实现代码
2010/03/15 Javascript
JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
2010/11/09 Javascript
JavaScript实现网页图片等比例缩放实现代码及调用方式
2013/02/25 Javascript
使用javascript为网页增加夜间模式
2014/01/26 Javascript
jQuery构造函数init参数分析
2015/05/13 Javascript
AngularJs  Using $location详解及示例代码
2016/09/02 Javascript
vue数据传递--我有特殊的实现技巧
2018/03/20 Javascript
在react项目中使用antd的form组件,动态设置input框的值
2020/10/24 Javascript
[02:20]DOTA2亚洲邀请赛 IG战队出场宣传片
2015/02/07 DOTA
[00:32]2018DOTA2亚洲邀请赛VG出场
2018/04/03 DOTA
python实现web方式logview的方法
2015/08/10 Python
Pythont特殊语法filter,map,reduce,apply使用方法
2016/02/27 Python
python实现发送邮件及附件功能
2021/03/02 Python
python3实现TCP协议的简单服务器和客户端案例(分享)
2017/06/14 Python
简单了解Pandas缺失值处理方法
2019/11/16 Python
台湾百利市购物中心:e-Payless
2017/08/16 全球购物
什么造成了Java里面的异常
2016/04/24 面试题
庆七一活动方案
2014/01/25 职场文书
感恩节红领巾广播稿
2014/02/11 职场文书
安全生产责任书
2014/03/12 职场文书
挂牌仪式主持词
2014/03/20 职场文书
《登鹳雀楼》教学反思
2014/04/09 职场文书
社区禁毒工作方案
2014/06/02 职场文书
大学奖学金获奖感言
2014/08/15 职场文书
大学生翘课检讨书范文
2014/10/06 职场文书
破坏寝室公物检讨书
2014/11/17 职场文书
追悼会答谢词范文
2015/09/29 职场文书
2015年店长个人工作总结
2015/10/23 职场文书
市场营销计划书
2019/04/24 职场文书
python 如何用map()函数创建多线程任务
2021/04/07 Python
MySQL pt-slave-restart工具的使用简介
2021/04/07 MySQL
go select编译期的优化处理逻辑使用场景分析
2021/06/28 Golang