说明:
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