今天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的更多相关文章

  1. 浏览器桌面通知Notification探究

    首先说明,这篇博文不是科普讲解的,而是立flag研究的,是关于浏览器消息自动推送,就是下面这个玩意: 最近常常在浏览器看到这样的消息推送,还有QQ.com的推送,现在我对这个不了解,不知道叫消息自动推 ...

  2. h5桌面通知Notification

    H5中的桌面通知Notification 前言: 对于一个前端开发者,逛网页总会留意一些新奇的功能,对于上班总会用到Teambition的我,总是能收到Notification...所以今天就来研究下 ...

  3. Chrome浏览器扩展开发系列之十：桌面通知Notification

    Desktop Notification也称为Web Notification,是在Web页面之外,以弹出桌面对话框的形式通知用户发生了某事件.Web Notification于2015.9.10成为 ...

  4. 浏览器桌面通知Notification实践

    一言不合就上图: 最近常常在浏览器看到这样的消息推送,还有QQ.com的推送,现在我对这个不了解,不知道叫消息自动推送对不对,这个时chrome浏览器的截图,出现在右下角,其他浏览器的样式可能有些微差 ...

  5. 浏览器桌面通知--Notification

    前言 最近项目上要用到浏览器桌面通知,之前虽然知道有这个东西,但是一直没有用过,借此机会了解下桌面通知的机制,在此分享下. 1.权限 首先需要明确的是,不是所有网页都可以发桌面通知的,不然不得烦死,那 ...

  6. 轻松让HTML5可以显示桌面通知Notification非常实用

    使用Notification的流程 1.检查浏览器是否支持Notification2.检查浏览器的通知权限3.如果权限不够则申请获取权限4.创建消息通知5.展示消息通知 Notification AP ...

  7. html5桌面通知,notification的使用,右下角出现通知框

    1先判断浏览器是否支持:window.Notification 2判断浏览器是否开启提示的权限:Notification.permission === 'granted'(如果不允许则设置为允许:No ...

  8. chrome浏览器的桌面通知

    最近在使用朋友网(不加链接,避免有打广告的嫌疑),发现会出现提示“是否允许网站显示桌面通知?”,如下图所示: 这种做法,在页面加载完时直接调用请求,比起开心网的这种提示感觉有些野蛮了.开心网的桌面通知 ...

  9. H5 notification浏览器桌面通知

    Notification是HTML5新增的API,用于向用户配置和显示桌面通知.上次在别的网站上看到别人的通知弹窗,好奇之余也想知道如何实现的.实际去查一下发现并不复杂,且可以说比较简单,故写篇博客分 ...

随机推荐

  1. Nginx在线服务状态下平滑升级或新增模块的详细操作

    今天应开发的需求,需要在Nginx增加一个模块,并不能影响现有的业务,所以就必须要平滑升级Nginx,好了,不多说了 1:查看现有的nginx编译参数 /usr/local/nginx/sbin/ng ...

  2. 基于fastweixin的微信开发环境搭建（一）

    由于公司业务需要,开发微信版本,才开始接触微信公众平台.在github折腾了几天,试过好几个微信sdk,最终选择fastweixin.个人觉得这个框架还是值得使用的,使用也简单.那么问题来了,很多人想 ...

  3. MVC防止xss攻击 ——Html.AntiForgeryToken的AJAX提交

    1.在Html表单里面使用了@Html.AntiForgeryToken()就可以阻止CSRF攻击. 2.相应的我们要在Controller中也要加入[ValidateAntiForgeryToken ...

  4. 在QtCreator中使用doxygen

    接触Doxygen后,认识到其强大之处,一口气将之前的烂代码重构了一遍,所有的文件头,函数注释等等都是手动添加注释.在keil中可以看到其对JavaDoc风格的注释有高亮,非常好看.但是keil这个I ...

  5. 学习笔记——EM算法

    EM算法是一种迭代算法,用于含有隐变量(hidden variable)的概率模型参数的极大似然估计,或极大后验概率估计.EM算法的每次迭代由两步组成:E步,求期望(expectation):M步,求 ...

  6. XML文件(1)--使用DOM示例

    其他依赖字段/方法 // 书籍列表 private List<Book> bookList = new LinkedList<Book>(); /** * 根据xml文件,得到 ...

  7. showPrompt弹框提示

    工作中会有很多的弹框,用来添加模板,用来信息提示,,我现在用的模板有dialog(用来添加数据模板内容),还有一个就是自写的showPrompt用来判断错误或者正确的信息~~ 样子大概就是这样的,, ...

  8. 每天写点python

    1.收集系统信息python小程序 1 #!/usr/bin/env python 2 #A system information gathering script 3 4 import subpro ...

  9. 小白 安装和配置Tomcat 局域网内访问网页

    1.官网http://tomcat.apache.org/  ,下载tomcat,解压就好 2.官网www.oracle.com, 下载javaJDK,截图如下,点击黄色荧光笔

  10. Js计算当前日，当前周开始结束时间，当前月份，当前年份

    <script type="text/javascript"> //日期加上天数后的新日期. function GetDateStr(AddDayCount) { va ...