今天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. Apache服务器网站访问伪静态内页出现No input file specified.的完美解决方案

    原文地址:Apache服务器网站访问伪静态内页出现No input file specified.的完美解决方案 启用REWRITE的伪静态功能的时候,首页可以访问,而访问内页的时候,就提示:&quo ...

  2. HTTP 基础知识

    HTTP是一种协议.HTTP使用流程,一般情况下, 第一:由HTTP客户端发出请求,创建端口. 第二:HTTP服务器在端口监听客户端的请求. 第三:一旦收到请求,HTTP服务器向客户端返回状态和内容. ...

  3. oracle 按时间段统计15分钟内的数据

    string sql = "select to_char(StartTime, 'yyyy')||'-'|| to_char(StartTime, 'mm')||'-'|| to_char( ...

  4. p/invoke 碎片-- 对字符串的处理

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

  5. Eclipse中.calsspath文件解析

    来自帅气的Sublime Text

  6. jquery 中jsonp的实现原理

    在同源策略下,在某个服务器下的页面是无法获取到该服务器以外的数据的,即一般的 ajax是不能进行跨域请求的.但 img.iframe .script等标签是个例外,这些标签可以通过 src属性请求到其 ...

  7. SDK,API,DLL名词解释

    SDK (software devalopment kit) 软件开发工具包 : 一般都是一些软件工程师Wie特定的软件包.软件框架.硬件平台.操作系统等建立应用软件时的开发工具的集合. API (A ...

  8. 架构和模式的区别：三层架构和MVC在应用开发中的位置

    架构是系统层面的,可以是多层架构,也可以是事件驱动架构,也可以是微服务架构. 模式是GUI应用的一种职责分离设计. 三层架构(包含多层架构)和 MVC模式(包含MVP, MVVM) 没什么关系,它们不 ...

  9. linQ学习笔记之三高级语句

    linq语句查询执行的时机 第一步获取数据源 int [] obejct = new int[]{1,2,3,4,5,6,7,8,9} 第二步定义查询 var even = numbers.where ...

  10. latex公式编号

    1 \begin{flalign*} 2 % In this way (this arrange of &), the equation will in the center and alig ...