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 ...
随机推荐
- cdoj 题目简单分类
如有错误请联系我,下面题的题解,除了傻逼题均可以在我blog中查找 1 傻逼题 3 傻逼题 4 傻逼题 15 dfs 24 傻逼题 25傻逼题 26 傻逼题 30 flyod 31 01背包 42 k ...
- or1200下raw-os学习(任务篇)
这次就来说说基于上一节介绍的系统框图去建立我们所需要的任务,顺便学习Raw-OS提供的API,根据上节的分析,对于Slave Board有如下设计: Slave Board有三个任务,分别负责测试阻抗 ...
- HTML之一 符号实体
符号实体和”语言代码“以及”字符集“无关.
- innodB的隐式锁
http://blog.csdn.net/taozhi20084525/article/details/19545231 一.知识准备之隐式锁 参考:http://www.uml.org.cn/sjj ...
- Jquery实现页面上所有的checkbox只能选中一个
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
- JQuery实现回车代替Tab键(按回车跳到下一栏)
一个提交按钮以后,用户如果按了键盘的回车键,默认情况下,就会提交这个表单了.这样对于用户输入各个表单项目,用户体验很不好,输入完一个项目,或者用鼠标选择下一个项目,或者用键盘的Tab键选中下一个项目. ...
- C#面向对象（四）虚方法实现多态
一.虚方法实现多态 1,创建一个people基类 using System; using System.Collections.Generic; using System.Linq; using Sy ...
- c++11 Chrono时间库
c++11 Chrono时间库 http://en.cppreference.com/mwiki/index.php?title=Special%3ASearch&search=chrono ...
- [设计模式] .NET设计模式笔记 - 有多少种设计模式
.NET下的23中设计模式. ※创建型模式篇 ●单件模式(Single Pattern) ●抽象工厂模式(Abstract Factory) ●建造者模式(Builder Pattern) ●工厂方法 ...
- Debian 8 安装 Nvidia 显卡驱动
sudo apt-get install linux-headers-$(uname -r|sed 's,[^-]*-[^-]*-,,') nvidia-kernel-dkms 正在读取软件包列表.. ...