Chrome 桌面通知Notification
今天2016-11-18号,最新chrome版本:V50
在网上找了好久都用不了,因为chrome版本已经是V50了,chrome在V22版本之后就取消掉window.webkitNotifications通知。
chrome现在走的是w3c标准化。
W3C中关于通知文档:
https://www.w3.org/TR/notifications/
直接上代码:
<!DOCTYPE html>
<html>
<head>
<title>Google 桌面通知</title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv='content-type' content='text/html; charset=utf-8' />
</head>
<body> <button id='btn'>显示桌面通知</button> <script type='text/javascript'>
Notification.requestPermission();
document.querySelector("#btn").addEventListener('click', notify, false); function notify() { var notification = new Notification("标题:程序",{
body : "内容content",
icon : 'http://images0.cnblogs.com/news_topic/firefox.gif',
sound:audioNotification(),
tag : {} // 可以加一个tag
});
} function audioNotification(){
var yourSound = new Audio('http://df.notf.com/a.mp3');
yourSound.play();
}
</script>
</body>
</html>
通过ajax定时获取后台是否有内容需要提醒,可以写一个方法
notify('**同学,有新的订单提交','订单号:1202100');
function notify(title,content) { var notification = new Notification("title",{
body :content,
icon : 'http://images0.cnblogs.com/news_topic/firefox.gif',
sound:audioNotification(),
tag : {} // 可以加一个tag
});
}
可实行桌面通知,带标题、内容、图标,重要的是可以有声音提示。
参考:http://www.cnblogs.com/guangxiaoluo/p/4182500.html
Chrome 桌面通知Notification的更多相关文章
- 浏览器桌面通知Notification探究
首先说明,这篇博文不是科普讲解的,而是立flag研究的,是关于浏览器消息自动推送,就是下面这个玩意: 最近常常在浏览器看到这样的消息推送,还有QQ.com的推送,现在我对这个不了解,不知道叫消息自动推 ...
- h5桌面通知Notification
H5中的桌面通知Notification 前言: 对于一个前端开发者,逛网页总会留意一些新奇的功能,对于上班总会用到Teambition的我,总是能收到Notification...所以今天就来研究下 ...
- Chrome浏览器扩展开发系列之十:桌面通知Notification
Desktop Notification也称为Web Notification,是在Web页面之外,以弹出桌面对话框的形式通知用户发生了某事件.Web Notification于2015.9.10成为 ...
- 浏览器桌面通知Notification实践
一言不合就上图: 最近常常在浏览器看到这样的消息推送,还有QQ.com的推送,现在我对这个不了解,不知道叫消息自动推送对不对,这个时chrome浏览器的截图,出现在右下角,其他浏览器的样式可能有些微差 ...
- 浏览器桌面通知--Notification
前言 最近项目上要用到浏览器桌面通知,之前虽然知道有这个东西,但是一直没有用过,借此机会了解下桌面通知的机制,在此分享下. 1.权限 首先需要明确的是,不是所有网页都可以发桌面通知的,不然不得烦死,那 ...
- 轻松让HTML5可以显示桌面通知Notification非常实用
使用Notification的流程 1.检查浏览器是否支持Notification2.检查浏览器的通知权限3.如果权限不够则申请获取权限4.创建消息通知5.展示消息通知 Notification AP ...
- html5桌面通知,notification的使用,右下角出现通知框
1先判断浏览器是否支持:window.Notification 2判断浏览器是否开启提示的权限:Notification.permission === 'granted'(如果不允许则设置为允许:No ...
- chrome浏览器的桌面通知
最近在使用朋友网(不加链接,避免有打广告的嫌疑),发现会出现提示“是否允许网站显示桌面通知?”,如下图所示: 这种做法,在页面加载完时直接调用请求,比起开心网的这种提示感觉有些野蛮了.开心网的桌面通知 ...
- H5 notification浏览器桌面通知
Notification是HTML5新增的API,用于向用户配置和显示桌面通知.上次在别的网站上看到别人的通知弹窗,好奇之余也想知道如何实现的.实际去查一下发现并不复杂,且可以说比较简单,故写篇博客分 ...
随机推荐
- 第2章 ASP.NET MVC(URL、路由及区域)
* { font: 17px/1.5em "Microsoft YaHei" } ASPNET MVC URL.路由及区域 一.URL.路由及区域 一. 配置路由器 1. ...
- c#.net单例模式的学习记录!
一. 单例(Singleton)模式 单例模式的特点: 单例类只能有一个实例. 单例类必须自己创建自己的唯一实例. 单例类必须给所有其它对象提供这一实例. 单例模式应用: 每台计算机可以有若干个打印机 ...
- java ---- 面试题
1.java 语言如何进行异常处理,关键字:throws.throw.try.catch.finally分别代表什么意义?finally代码是在return之后还是之前执行? throws是获取异常, ...
- DataTable DataRow DataColumn DataSet
1.DataTable 数据表(内存) 2.DataRow DataTable 的行 3.DataColumn DataTable 的列 4.DataSet 内存中的缓存
- JQuery选择器JQuery 事件
JQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素. $("p") 选取 <p> 元素. $("p.intro") ...
- Git使用小记
刚刚简答的完成了pureblog,想着先上传导Github上去,等着以后有时间了在完善其功能,所以使用Git上传导Github代码仓库上去,这里简答的记录以下使用小计. 我们首先下载Git,我们使用用 ...
- Assetbundles
Unity5.4 Assetbundles官方说明 http://iq007.blog.163.com/blog/static/265542019201681264813653?suggestedre ...
- 手动安装Oracle的Maven依赖
由于Oracle授权问题,Maven3不提供Oracle JDBC driver,为了在Maven项目中应用Oracle JDBC driver,必须手动添加到本地仓库. 环境:win7 + Orac ...
- mySql 远程连接(is not allowed to connect to this MySQL server)
如果你想连接你的mysql的时候发生这个错误: ERROR 1130: Host '192.168.1.3' is not allowed to connect to this MySQL serve ...
- Gedit 解决中文显示乱码问题
详细请参考:http://wiki.ubuntu.org.cn/Gedit%E4%B8%AD%E6%96%87%E4%B9%B1%E7%A0%81 具体原因是Gedit的默认编码设置没有添加中文编码所 ...