HTML5开启浏览器桌面通知 Web Notification

淡淡的烟草味﹌ 2022-05-18 10:09 357阅读 0赞

![70][]

说明：  
1、Chrome要求必须https才可以开启浏览器通知  
2、显示图片在本服务器，不支持跨越  
3、自定义声音Chrome不播放，Firefox正常播放

代码如下：

<!DOCTYPE html>
    <html lang="zh-CN">
    <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][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

[70]: /images/20220518/83f77d8a04274624b80c21fe0e22d754.png
[https_download.csdn.net_download_u010071211_10579173]: https://download.csdn.net/download/u010071211/10579173