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 ...
随机推荐
- ssh-keygen 无密码登陆需要注意一个问题
从今天开始记录一下工程上的小知识. ssh-keygen -t rsa cat id_rsa.pub >> authorized_keys后,切记,将authrorized_keys文件的 ...
- Codeforces Round #190 (Div. 2) E. Ciel the Commander 点分治
E. Ciel the Commander Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://www.codeforces.com/contest ...
- 防止IE缓存jquery ajax 内容
转自:http://blog.163.com/haijun_huang/blog/static/167591377201201235754763/ 解决办法: 方法一:把type改成post,并随便设 ...
- 关于Android 访问权限设置
我前几天在做同城交友网(www.niyuewo.com)与医药网(www.yiyaojing.com)时遇到的问题整理如下: Android开发应用程序时,如果应用程序需要访问网络权限,需要在 And ...
- Lua读写文件
文件读写 文件读写对制作游戏很有帮助.可以调用别的文件中的代码,保存最高分.游戏存档.玩家状态等信写到文件中. 首先,让我们看一个简单的命令:dofile.这个命令会读入另一个文件的代码并立即执行. ...
- HDU 4605 Magic Ball Game 树状数组
题目大意很简单. 有一颗树(10^5结点),所有结点要么没有子结点,要么有两个子结点.然后每个结点都有一个重量值,根结点是1 然后有一个球,从结点1开始往子孙结点走. 每碰到一个结点,有三种情况 如果 ...
- Nice是如何做iOS客户端架构的？
一个创业产品的iOS客户端架构到底怎么做呢?现下最有活力的图片社交软件Nice的技术负责人刘诗彬将为我们解答创业产品如何实现iOS客户端架构. 分享人:刘诗彬,毕业于北京邮电大学电子信息科学与技术专业 ...
- C# 代码生成工具 Millennials
Millennials 是一个可定制的 C# 代码生成工具,支持 MVC 和三层架构.ADO.NET.Nhibernate 和 LINQ. 项目主页:http://www.open-open.com/ ...
- Windows配置端口转发
windows命令行下用netsh实现端口转发 微软Windows的netsh是一个命令行脚本实用工具.使用netsh工具 ,可以查看或更改本地计算机或远程计算机的网络配置.不仅可以在本地计算机上运行 ...
- 运用Real Spy Monitor监控网络
Real Spy Monitor是一个监测互联网和个人电脑,以保障其安全的软件.包括键盘敲击.网页站点.视窗开关.程序执行.屏幕扫描以及文件的出入等都是其监控的对象. 1.添加使用密码 在使用Real ...