今天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. validate表单验证插件

    1.引入validate.js包 <script src="xx/xx/jquery.validate.min.js"></script> 2.表单验证 / ...

  2. C3P0连接池配置和实现详解

    一.配置 <c3p0-config> <default-config> <!--当连接池中的连接耗尽的时候c3p0一次同时获取的连接数.Default: 3 --> ...

  3. Tomcat8安装， 安全配置与性能优化（转）

    一.Tomcat 安装 官网:http://tomcat.apache.org/ Tomcat8官网下载地址:http://tomcat.apache.org/download-80.cgi 为了便于 ...

  4. 关于node的http模块

    var http = require('http'); /** * 创建服务器的两种写法,第一种写法如下 * 由于server已经继承了EventEmitter的事件功能,所以可以使用高级函数编写方式 ...

  5. EntityFramework 优化建议

    Entity Framework目前最新版本是6.1.3,当然Entity Framework 7 目前还是预览版,并不能投入正式生产环境,估计正式版16年第一季度会出来,了解过EF7的部分新特性后, ...

  6. nuget国内镜像的解决办法

    不求人,在阿里云上安一个nuget镜像站,这样就能愉快编程了. 主要是利用nginx 的反向代理+缓存功能+响应文本的替换 proxy_cache_path /data/nuget-cache lev ...

  7. java关于压缩包的处理，我这里贴出三中格式的（zip，rar，tar）解压方法（目前只用到解压，所以压缩过多研究）。

    1.首先我们先来说下为什么会有这三中格式: (1)rar格式:rar格式是最先出现的压缩方式,它主要是用于商业机构一些文件的压缩,它可以根据不同公司的要求,去设定制定不同的压缩算法,这种算法是不对外公 ...

  8. 在SQL中 给字符串补0方法

    --第一种方法SELECT RIGHT('00000'+CAST(ID AS nvarchar(50)),5) FROM dbo.TableName --左边补0,如 00001,00039 SELE ...

  9. Sublime Text 3 安装Package Control

    原来Subl3安装Package Control很麻烦,现在简单的方法来了 一.简单的安装方法 使用Ctrl+`快捷键或者通过View->Show Console菜单打开命令行,粘贴如下代码: ...

  10. 百度编辑器UEditor的使用方法

    百度编辑器具有丰富文本编辑功能,且开源免费,其使用方法如下: 1.在官网上下载对应的Uditor压缩包:http://ueditor.baidu.com/website/download.html 2 ...