说明：
1、Chrome要求必须https才可以开启浏览器通知
2、显示图片在本服务器，不支持跨越
3、自定义声音Chrome不播放，Firefox正常播放
代码如下：
<!-- /**
* @Author: Ding Jianlong
* @Date: 2018-08-02 10:20:58
* @Last Modified by: Ding Jianlong
* @Last Modified time: 2018-08-02 12:35:45
*/ -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Ding Jianlong Html</title>
</head>
<body>
<h1>Hell world!</h1>
</body>
<script>
/**
* 通过Html调用显示系统通知
* @param title
* @param msg
* @param imgUrl
*/
function showNotification(title,msg,imgUrl){
var Notification = window.Notification || window.mozNotification || window.webkitNotification;
// 判断浏览器是否支持桌面通知
if(Notification){
Notification.requestPermission(function(result){
//result 默认值'default'等同于拒绝 'denied' -用户选择了拒绝 'granted' -用户同意启用通知
if("granted" != result){
alert('请授权浏览器能够进行通知!');
return false;
}else{
var tag = "sds"+Math.random();
var notify = new Notification(
title,
{
dir:'auto',
lang:'zh-CN',
tag:tag,//实例化的notification的id
icon:imgUrl,//通知的缩略图,icon 支持ico、png、jpg、jpeg格式
title:title, //通知的标题
body:msg //通知的具体内容
}
);
// 定义通知窗口点击函数
notify.onclick=function(){
//如果通知消息被点击,通知窗口将被激活
window.focus();
};
// 定义通知错误事件
notify.onerror = function () {
// console.log("");
};
// 定义通知显示事件 可以设置多少秒之后关闭 也可以不设置关闭
notify.onshow = function () {
// 窗口显示 播放音频
var audio = new Audio("./10418.wav");
audio.play();
// 窗口显示3S后关闭
setTimeout(function(){
notify.close();
},3000);
};
// 定义通知关闭事件
notify.onclose = function () {
};
}
});
}else{
// 提示不支持系统通知
alert('您的浏览器不支持系统通知,建议使用Chrome浏览');
}
}
showNotification('通知标题','这是一条测试通知啦啦啦啦啦了啦啦啦啦啦阿拉拉了','./demo.jpg');
</script>
</html>源代码下载：https://download.csdn.net/download/u010071211/10579173
音效下载：http://sc.chinaz.com/tag_yinxiao/tishi.html
参考文章：
https://www.zhangxinxu.com/wordpress/2016/07/know-html5-web-notification/
https://blog.csdn.net/mynewdays/article/details/50312599
http://blog.51cto.com/shimengwen/1361893
https://www.jianshu.com/p/7166e80f7ee7
https://github.com/Nickersoft/push.js
代码转自: https://blog.csdn.net/u010071211/article/details/81357712
测试页面: https://www.sanshu.cn/static/pages/h5notify2.html
群主管理都是支付大佬
