HTML5桌面通知(Web Notifications)实例解析
先上一段代码，ie不支持，Chrome、fireFox、Opera支持
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Notification</title>
<meta charset="utf-8" />
<script src="../js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" language="javascript">
$(function () {var Notification = window.Notification || window.mozNotification || window.webkitNotification;
});
function init() {
if (Notification) {
Notification.requestPermission(function (permission) {
});
}
}
function notify() {
if (Notification && Notification.permission == "granted") {
var instance = new Notification(
"title Notification", {
body: "notification HTML5 test",
icon: "logo.png"
})
}
}
</script>
</head>
<body>
<input type="button" value="验证授权" onclick="init()" />
<input type="button" value="弹出消息" onclick="notify()" />
</body>
</html>
html5桌面通知(Web Notifications)对于需要实现在新消息入线时，有桌面通知效果的情况下非常有用，在此简单介绍一下这个html5的新属性。
这里有个不错的demo：html5 web notification demo
从上面这个demo中 我们就可以获取所需要的基本核心代码，如下：
<script>
var Notification = window.Notification || window.mozNotification || window.webkitNotification; Notification.requestPermission(function (permission) {
// console.log(permission);
}); function show() {
var instance = new Notification(
"test title", {
body: " test message"
}
); instance.onclick = function () {
// Something to do
};
instance.onerror = function () {
// Something to do
};
instance.onshow = function () {
// Something to do
};
instance.onclose = function () {
// Something to do
}; return false;
}
</script>
其中：Notification.requestPermission 这句代码的功能就是向用户请求权限允许。
通过以上的例子，基本思路我们已经有了，首先加载文档时，就向用户请求权限，获取权限后以后都so easy了。
window.addEventListener('load', function () {
// At first, let's check if we have permission for notification
if (Notification && Notification.permission !== "granted") {
Notification.requestPermission(function (status) {
if (Notification.permission !== status) {
Notification.permission = status;
}
});
}
});
火狐下 验证是通过的，但是在chrome下总是出不来，后来发现这样一段话
Not a Bug, Feature. Desktop Notifications can only be triggered via a user action. Typing into the
JavaScript console has the same effect as raw javascript code embedded into the web
page (no user action). Typing the javascript into the location bar, however,
represents a user-action (the user is intentionally visiting a javascript link to
enable notifications, probably for sites that tend to use href="javascript：" instead
of onclick="". I'm pretty sure this is a non-issue.
原来在chrome下是必须要用户手动触发的，否则，chrome浏览器会无视这段的js
但是在我们网站里肯定不可能加一个按钮或者超链接来显式的让用户授权吧，好吧， 实际上这也不是个事情，我们可以在用户经常点的按钮上顺便处理下这个授权就好，在chrome下是一次授权终身有用。除非你进入设置把他禁了。
整合一下，代码如下：
function showMsgNotification(title, msg){
var Notification = window.Notification || window.mozNotification || window.webkitNotification;
if (Notification && Notification.permission === "granted") {
var instance = new Notification(
title, {
body: msg,
icon: "image_url"
}
);
instance.onclick = function () {
// Something to do
};
instance.onerror = function () {
// Something to do
};
instance.onshow = function () {
// Something to do
// console.log(instance.close);
setTimeout(instance.close, 3000);
};
instance.onclose = function () {
// Something to do
};
}else if (Notification && Notification.permission !== "denied") {
Notification.requestPermission(function (status) {
if (Notification.permission !== status) {
Notification.permission = status;
}
// If the user said okay
if (status === "granted") {
var instance = new Notification(
title, {
body: msg,
icon: "image_url"
}
);
instance.onclick = function () {
// Something to do
};
instance.onerror = function () {
// Something to do
};
instance.onshow = function () {
// Something to do
setTimeout(instance.close, 3000);
};
instance.onclose = function () {
// Something to do
};
}else {
return false
}
});
}else{
return false;
}
}
参考：http://www.jb51.net/html5/186999.html
HTML5桌面通知(Web Notifications)实例解析的更多相关文章
- 浏览器通知Web Notifications实例页面
HTML代码: <button id="button">有人想加你为好友</button> <p id="text">< ...
- HTML5桌面通知：notification
最近由于公司业务需要,领导要求IM消息有像网页微信那样有新消息桌面右下角弹出一个提示框的效果!由于自己才疏学浅,一时还没明白微信是怎么实现的!所以只能问百度(因为懒得FQ)咯! 在网上搜索了N久,心都 ...
- HTML5开启浏览器桌面通知 Web Notification
说明: 1.Chrome要求必须https才可以开启浏览器通知 2.显示图片在本服务器,不支持跨越 3.自定义声音Chrome不播放,Firefox正常播放 代码如下: <!-- /** * @ ...
- HTML5桌面通知：notification api
1. 为什么需要HTML5的桌面通知 传统的桌面通知可以写一个div放到页面右下角自动弹出来,并通过轮询等等其他方式去获取消息并推送给用户.这种方式有个弊端就是:当我在使用京东 进行购物的时候,我是不 ...
- 介绍一个比较酷东西：HTML5 桌面通知（Notification API）
Notification API 是 HTML5 新增的桌面通知 API,用于向用户显示通知信息.该通知是脱离浏览器的,即使用户没有停留在当前标签页,甚至最小化了浏览器,该通知信息也一样会置顶显示出来 ...
- HTML5 桌面通知：Notification API
原文地址:http://blog.gdfengshuo.com/article/23/ 前言 Notification API 是 HTML5 新增的桌面通知 API,用于向用户显示通知信息.该通知是 ...
- 浏览器桌面通知（notifications）
近期在做公司后台管理系统,当有任务到来时,须要通知当事人,可是 当事人有可能在做别的,浏览器有可能会被最小化,这样就非常难看到通知了.经过查找发现有些浏览器能够使用noitfications.能够在桌 ...
- 浏览器开启桌面通知Web Notification
本文主要描述如何开启各个浏览器的桌面通知功能 一.谷歌浏览器(chrome) 点击地址栏前面的图标
- html5桌面通知,notification的使用,右下角出现通知框
1先判断浏览器是否支持:window.Notification 2判断浏览器是否开启提示的权限:Notification.permission === 'granted'(如果不允许则设置为允许:No ...
随机推荐
- C++异常
相对于C语言,C++增加了异常机制.考虑,异常解决了什么问题,又带来了什么问题. 异常解决了什么问题: 1.问题检测与问题处理相分离. 2.C语言只是返回一个整数,而异常带有上下文信息,方便找出问题. ...
- android 系统定制的小技巧(网络收集)
1开机图片: android-logo-mask.png android-logo-shine.png 这两个图片一个在上一个在下 ./out/target/common/obj/JAVA_LIBRA ...
- iOS 开发——实用技术Swift篇&Swift 懒加载(lazy)
Swift 懒加载(lazy) 在程序设计中,我们经常会使用 * 懒加载 * ,顾名思义,就是用到的时候再开辟空间,比如iOS开发中的最常用控件UITableView,实现数据源方法的时候,通常我们都 ...
- 三星Galaxy S4(GT-I9500)获取ROOT权限教程(转)
http://news.candou.com/2013-05-20/453695_1.shtml 获取root权限的方法
- JavaScript跨域实现
最近在做个上传文件的服务,其中包含一个上传的web页面.目的是想客户端页面嵌套这个web页面,然后直接将文件上传到服务器. 因为文件不同所以需要保存到的文件夹名称也不一样,所以客户端需要传递一个文件夹 ...
- GridView格式化
<asp:TemplateColumn HeaderText="进出境运输方式"> <ItemTemplate> <%# Eval(" ...
- 完美的.net泛型也有特定的性能黑点?追根问底并且改善这个性能问题
完美的.net真泛型真的完美吗 码C#多年,不求甚解觉得泛型就是传说中那么完美,性能也是超级好,不错,在绝大部分场景下泛型表现简直可以用完美来形容,不过随着前一阵重做IOC时,才发现与自己预想中不一样 ...
- Code Jam 2008 APAC local onsites Problem C. Millionaire —— 概率DP
题意: 你有X元钱,进行M轮赌博游戏.每一轮可以将所持的任意一部分钱作为赌注(赌注为0元表示这一轮不押),赌注可以是小数的,不是一定要整数.每一轮 赢的概率为P,赢了赌注翻倍,输了赌注就没了.如果你最 ...
- Balloon Comes!
Problem Description The contest starts now! How excited it is to see balloons floating around. You, ...
- [C.Sharp] TimeSpan的用法，获取测试程序运行时间
TimeSpan的用法 TimeSpan是用来表示一个时间段的实例,两个时间的差可以构成一个TimeSpan实例,现在就来简单介绍一下几点重要的用法: a 先来介绍几个方法 TimeSpan.Minu ...