HTML5通知功能(简洁版)

html5 文章 2021-05-13 22:55 87 0 全屏看文

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


-EOF-