下面的例子展示了你如何产生系统的通知。使用HTML5中的Notifications API 和Google Chrome浏览器.
<!DOCTYPE HTML>
<html>
<head>
<title>Creating OS notifications in HTML5</title>
</head>
<body>
<form>
<input type="button" value="Hey, do you want to show notifications or not?" onclick="init();" />
<input type="button" value="Send OS notification" onclick="notify();" />
</form>
<script type="text/javascript">
const AUTO_CLOSE_DELAY_SECONDS = 5;
function init() {
if (window.webkitNotifications) {
window.webkitNotifications.requestPermission();
}
}
function notify() {
var icon = "accept.png";
var title = "[" + new Date().toLocaleTimeString() + "] This notification will close in " + AUTO_CLOSE_DELAY_SECONDS + " seconds";
var body = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id magna ut sapien sodales ultricies eget nec metus. Pellentesque molestie nunc nec leo iaculis eu dictum ante porta. Sed adipiscing condimentum sapien a scelerisque. Quisque luctus elit vel odio semper iaculis. Nunc sit amet neque justo. Phasellus ullamcorper dui vel risus varius vitae aliquet purus consectetur. Fusce felis nibh, volutpat ac ornare at, ullamcorper eget lacus. Nunc euismod iaculis porta. In hac habitasse platea dictumst. Proin a sem sed neque tincidunt scelerisque eget in elit. Ut quis felis quis tortor sollicitudin sollicitudin id quis tortor. Nunc porttitor diam id leo lobortis aliquet. Nam scelerisque molestie dolor, placerat hendrerit urna euismod eu. Praesent nec massa enim. Donec nec urna dignissim nunc fringilla luctus. Nunc pretium urna et diam accumsan fermentum. Vivamus condimentum lectus vitae mi vulputate pulvinar. Curabitur adipiscing ultrices arcu. Vestibulum luctus malesuada erat sit amet rutrum. Nam feugiat lectus quis libero adipiscing laoreet.";
if (window.webkitNotifications) {
if (window.webkitNotifications.checkPermission() == 0) {
var popup = window.webkitNotifications.createNotification(icon, title, body);
popup.ondisplay = function(event) {
setTimeout(function() {
event.currentTarget.cancel();
}, AUTO_CLOSE_DELAY_SECONDS * 1000);
}
popup.show();
} else {
window.webkitNotifications.requestPermission();
return;
}
}
}
</script>
</body>
</html>
源码下载：
使用HTML5中的Notifications API 和Google Chrome浏览器产生系统通知
分享到：
相关推荐
Android 一种基于Linux的自由及开放源代码的操作系统，主要使用于移动设备，如智能手机和平板电脑，由Google公司和开放手机联盟领导开发 IOS 由苹果公司开发的移动操作系统 Webkit 一个开源的浏览器引擎，在手机上的...
网趣网上购物系统Html静态版 已经完美加入商品积分、兑换功能，预存款与积分可以相互兑换，并可以用积分购买站内奖品。 四五、支持验证码无刷新变换功能! 用户在登陆时往往会有输错验证码的情况，这时往往要刷新...
同时支持管理员邮件群发，为方便用户购物，报价中心可以直接把商品放入购物车，用户前台购物支持商品对比功能，新版系统新增图片在线操作，支持图片预览并支持删除操作并支持删除商品自动清除图片功能。 网趣静态...
同时支持管理员邮件群发，为方便用户购物，报价中心可以直接把商品放入购物车，用户前台购物支持商品对比功能，新版系统新增图片在线操作，支持图片预览并支持删除操作并支持删除商品自动清除图片功能。 网趣购物...
静态版拥有强大的订单管理系统，优秀的新订单邮件自动通知功能可以第一时间获知网站产生的新订单。可在线编辑生成的订单，并可对订单进行文本打印输出！可对订单进行价格、数量的再修改，也可删除订单中的某商品...
网趣时尚版整合最新的Kindeditor编辑器，解决了原有的兼容问题，增加新订单邮件通知自定义内容，支持HTML代码，同时在系统各方面均进行了大量的调整与更新，使系统在稳定性、运行效率、负载能力、安全等级等方面均...
前台框架： Bootstrap(一个HTML5响应式框架) 服务器端 ①.卡号管理：新建卡号、修改密码、用户充值，建立会员等； ②.信息管理：删除用户（管理员、计算机）信息、修改用户（管理员、计算机）信息、查询用户（管理员...
1.跨平台系统，能无差别的运行于Windows、Linux、Mac OS等操作系统。 2.★拥有云端版本更新通知服务器，可在后台获取官方的最新版本及每次更新的版本更新信息，及时通知用户进行升级。 3.★验证码支持短信、邮箱...
## 前台框架： Bootstrap(一个HTML5响应式框架) ## 服务器端 ①.卡号管理：新建卡号、修改密码、用户充值，建立会员等； ②.信息管理：删除用户（管理员、计算机）信息、修改用户（管理员、计算机）信息、查询用户...
具有操作简单、功能强大、性能稳定、安全性高等特点，多年的发展奠定了网趣软件在国内购物系统领域的绝对地位，成为众多用户网上开店的首选品牌，产品拥有庞大的用户使用群体，用户遍及全国各地，深受用户喜爱。...
## 前台框架： Bootstrap(一个HTML5响应式框架) ## 服务器端 ①.卡号管理：新建卡号、修改密码、用户充值，建立会员等； ②.信息管理：删除用户（管理员、计算机）信息、修改用户（管理员、计算机）信息、查询用户...
3.4.3 谨慎使用引入通知 3.5 使用ProxyFactoryBean 3.6 自动代理 3.6.1 BeanNameAutoProxyCreator 3.6.2 DefaultAdvisorAutoProxyCreator 3.6.3 元数据自动代理 3.7 小结 第二部分 ...
支持任何网页服务器、数据库或操作系统。 模块化开发，升级无忧。 电子书自动生成，可以将论坛，文章，专栏等部分的文章自动生成电子书提供下载。 <br> 更多介绍： 1，性能方面，使用最优化的...
3.24 判断手机操作系统版本是否允许运行程序 3.25 两个不同的程序彼此调用 3.26 指定安装应用程序迁移至SD卡 3.27 手机动态Layout主题随手势物换迁移 第4章 史上超豪华的手机控件 4.1 EditText与TextView共舞 4.2 ...
得到RSA密钥对，产生Signature对象,对用私钥对信息(info)签名，用指定算法产生签名对象，用私钥初始化签名对象，将待签名的数据传送给签名对象(须在初始化之后)，用公钥验证签名结果，使用公钥初始化签名对象,用于...
得到RSA密钥对，产生Signature对象,对用私钥对信息(info)签名，用指定算法产生签名对象，用私钥初始化签名对象，将待签名的数据传送给签名对象(须在初始化之后)，用公钥验证签名结果，使用公钥初始化签名对象,用于...
3.24 判断手机操作系统版本是否允许运行程序 3.25 两个不同的程序彼此调用 3.26 指定安装应用程序迁移至SD卡 3.27 手机动态Layout主题随手势物换迁移 第4章 史上超豪华的手机控件 4.1 EditText与TextView共舞 4.2 ...
3.24 判断手机操作系统版本是否允许运行程序 3.25 两个不同的程序彼此调用 3.26 指定安装应用程序迁移至SD卡 3.27 手机动态Layout主题随手势物换迁移 第4章 史上超豪华的手机控件 4.1 EditText与TextView共舞 4.2 ...
3.24 判断手机操作系统版本是否允许运行程序 3.25 两个不同的程序彼此调用 3.26 指定安装应用程序迁移至SD卡 3.27 手机动态Layout主题随手势物换迁移 第4章 史上超豪华的手机控件 4.1 EditText与TextView共舞 4.2 ...