今天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. R 查看函数源代码

    1:输入函数名. 2:methods( ),例如methods(quantile). 3:针对方法2得到的带*的,例stats:::quantile.default.

  2. WinForm------DateEdit属性设置

    1.只能选择年份属性设置                       

  3. video.js-H5视频播放库

    video.js是一款很流行的html5视频播放插件.很适合在移动端播放视频(比如微信网页),功能强大,且支持降级到flash,兼容ie8.官网:http://videojs.com/    git& ...

  4. 原生javascript 实现 animate

    原生javascript 实现 animate //animate function getstyle(obj,name){ if(obj.currentStyle){ return obj.curr ...

  5. Java国际化（i18n）

    Java国际化(i18n) 最近在做一个网站国际化的功能.用Java做开发,使用spring+velocity. Java提供了对i18n的支持,spring对其做了集成,可以很方便的配置.主要思想就 ...

  6. JavaMail: SSL vs TLS vs STARTTLS

    SSL vs TLS vs STARTTLS There's often quite a bit of confusion around the different terms SSL, TLS an ...

  7. php 全局变量

    参考链接:http://www.cnblogs.com/borage/p/3645285.html

  8. python中不同包之间调用方法、

    在pycharm中... 当两个py文件在同一个文件夹下的时候.直接from 文件名 import *  即可 当两个文件在不同的文件夹下的时候.需要在文件中加入 _init_.py 文件.里面可以什 ...

  9. ubuntu14.04环境下spyder的安装

    在ubuntu14.04系统中,默认在/usr/lib目录下安装了python2.7.6和python3.4.3,在该环境下安装spyder,然后使其链接到python3.4.3. 首先安装为pyth ...

  10. mysql存储过程编写-入门案例-遁地龙卷风

    (-1)写在前面 这篇文章只是简要的叙述了mysql存储过程编写的基本概念. 我使用的mysql版本是5.7.9-log. 参照<<深入浅出MySQL>>. (0) delim ...