今天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. p/invoke 碎片-- 对字符串的处理

    字符串在内存中的的几种风格 字符串作为参数和返回值 参考 字符串在内存中的几种风格 所谓的风格,也就是字符串在内存中的存在形式.如何存放的,占据内存的大小,还有存放顺序等.在不同的编程语言和不同的平台 ...

  2. Download Excel file with Angular

    源码连接(编写中) 用Angular下载后台返回的Excel文件,用Blob实现,引用FileSaver.js 后台C#代码: [WebMethod] public static byte[] Cal ...

  3. DX 系列之 ComboBoxEdit

    参考资料: ComboBoxEdit.Properties.Items=ComboBoxItemCollection

  4. c/c++ long long 和__64int区别

    在C/C++中,64为整型一直是一种没有确定规范的数据类型.现今主流的编译器中,对64为整型的支持也是标准不一,形态各异.一般来说,64位整型的定义方式有long long和__int64两种(VC还 ...

  5. Code Snippets 代码片段

    Code Snippets 代码片段       1.Title : 代码片段的标题 2.Summary : 代码片段的描述文字 3.Platform : 可以使用代码片段的平台,有IOS/OS X/ ...

  6. 在js中实现邮箱格式的验证

    在js中实现邮箱格式的验证 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><htm ...

  7. 如何使用FileZilla上传和下载文件

    一.使用FileZilla上传文件 1 打开 FileZilla 按照如下图所示,填写远程 Linux 的 IP ,用户名,密码,还有端口号(默认22) 2 选中左边需要上传的文件,然后拖到右边,等待 ...

  8. Spring Boot 乐观锁加锁失败 - 集成AOP

    Spring Boot with AOP 手头上的项目使用了Spring Boot, 在高并发的情况下,经常出现乐观锁加锁失败的情况(OptimisticLockingFailureException ...

  9. pycharm svn服务器访问不了的问题。

    昨天使用pycharm访问svn服务器的时候一直登陆不上. 总结一下遇到的svn的问题. 1.用户名密码错误.简单致命, 2.svn访问权限,这个是svn服务器那边可以设置的. 3.svn路径拼写错误 ...

  10. ES6学习笔记一

    块级作用域:在ES5中只有全局作用域与函数作用域,ES6中新增的块级作用域避免变量的覆盖与泄露.考虑到代码运行环境,在块级作用域中应避免声明函数,最好用函数表达式的方式声明. let与const:le ...