Chrome 桌面通知Notification

今天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

原文地址:https://www.cnblogs.com/dcb3688/p/4608033.html