今天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. CSS-用伪类制作小箭头（轮播图的左右切换btn）

    先上学习地址:http://www.htmleaf.com/Demo/201610234136.html 作者对轮播图左右按钮的处理方法一改往常,不是简单地用btn.prev+btn.next的图片代 ...

  2. HTML DOM prompt() 方法

    1. 定义和用法 prompt() 方法用于显示可提示用户进行输入的对话框. 语法 prompt(text,defaultText) 参数 描述 text 可选.要在对话框中显示的纯文本(而不是 HT ...

  3. C#客户端的异步操作

    上篇博客[用Asp.net写自己的服务框架] 我讲述了如何实现自己的服务框架,但我想很多人应该用过WebService这类服务框架,相比起来,似乎还缺少什么东西, 是的,我也感觉到了.比如:我可以很容 ...

  4. JS 获取CSS属性值

    obj: 元素对象 attribute: 属性 返回值:该对象这个属性的值 function getDefaultStyle(obj,attribute){ // 返回最终样式函数,兼容IE和DOM, ...

  5. video.js播放mp4文件

    HTML5的标签 video 支持的mp4编码为视频编码 H.264 音频AAC 参考网址 http://www.w3school.com.cn/html5/html_5_video.asp 视频格式 ...

  6. js删除数组指定元素

    删除js数组中制定的元素,这里用到了jquery. var a = new Array("a","b","cc","d3" ...

  7. CJCMS系列--持久层对MangoDB的支持

    持久层添加对MangoDB数据库的支持 using System; using System.Collections.Generic; using System.Linq; using System. ...

  8. 如何基于Azure平台实现MySQL HA（方法论篇）

    我们都知道,相较于传统的数据中心,Pulic cloud也有劣势,比如说数据库的HA,很多熟悉公有云平台的读者都知道,因为出于安全性性考虑以及一些技术条件的限制,很多本地数据中心的mysql HA方法 ...

  9. 第3月第15天 afconvert lame

    1. //CAF 转换成MP3 (可以) afconvert -f mp4f -d aac -b 128000 /Users/amarishuyi/Desktop/sound1.caf/Users/a ...

  10. js中typeof和instanceof

    对于typeof和instanceof,我们经常用来检测数据的类型.typeof可以检测Number.Boolean.String.Undefined类型,对于其他类型的数据都返回为object:而i ...