说明：

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

音效下载：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

HTML5开启浏览器桌面通知 Web Notification的更多相关文章

  1. 浏览器开启桌面通知Web Notification

    本文主要描述如何开启各个浏览器的桌面通知功能 一.谷歌浏览器(chrome) 点击地址栏前面的图标

  2. H5 notification浏览器桌面通知

    Notification是HTML5新增的API,用于向用户配置和显示桌面通知.上次在别的网站上看到别人的通知弹窗,好奇之余也想知道如何实现的.实际去查一下发现并不复杂,且可以说比较简单,故写篇博客分 ...

  3. HTML5桌面通知(Web Notifications)实例解析

    先上一段代码,ie不支持,Chrome.fireFox.Opera支持 <!DOCTYPE html> <html> <head> <meta http-eq ...

  4. 浏览器桌面通知Notification实践

    一言不合就上图: 最近常常在浏览器看到这样的消息推送,还有QQ.com的推送,现在我对这个不了解,不知道叫消息自动推送对不对,这个时chrome浏览器的截图,出现在右下角,其他浏览器的样式可能有些微差 ...

  5. 介绍一个比较酷东西：HTML5 桌面通知（Notification API）

    Notification API 是 HTML5 新增的桌面通知 API,用于向用户显示通知信息.该通知是脱离浏览器的,即使用户没有停留在当前标签页,甚至最小化了浏览器,该通知信息也一样会置顶显示出来 ...

  6. 浏览器桌面通知--Notification

    前言 最近项目上要用到浏览器桌面通知,之前虽然知道有这个东西,但是一直没有用过,借此机会了解下桌面通知的机制,在此分享下. 1.权限 首先需要明确的是,不是所有网页都可以发桌面通知的,不然不得烦死,那 ...

  7. 浏览器桌面通知Notification探究

    首先说明,这篇博文不是科普讲解的,而是立flag研究的,是关于浏览器消息自动推送,就是下面这个玩意: 最近常常在浏览器看到这样的消息推送,还有QQ.com的推送,现在我对这个不了解,不知道叫消息自动推 ...

  8. HTML5 桌面通知：Notification API

    原文地址:http://blog.gdfengshuo.com/article/23/ 前言 Notification API 是 HTML5 新增的桌面通知 API,用于向用户显示通知信息.该通知是 ...

  9. 浏览器桌面通知（notifications）

    近期在做公司后台管理系统,当有任务到来时,须要通知当事人,可是 当事人有可能在做别的,浏览器有可能会被最小化,这样就非常难看到通知了.经过查找发现有些浏览器能够使用noitfications.能够在桌 ...

随机推荐

  1. 使用easyui实现双击列表中某个值直接对其进行修改

    var editCell = undefined; $('#dg').datagrid({ url:'DwzServlet', iconCls:'icon icon-list' , queryPara ...

  2. 何凯文每日一句打卡||DAY14

  3. Java技术体系总结

    PC前端:Javascript.JQuery.Angularjs.Reactjs.TypeScript 移动前端:Vue.js.Zepto WebJars spring:spring mvc.spri ...

  4. 兼容 IE6+ 获取图片大小

    昨天说了 HTML5 的file对象可以获取到文件的 文件名,文件大小,文件类型,最后一次修改日期.其实 IE6-9 也可以变向的获取到,虽然没那么方便,但至少可以取到.来看例子吧: <!doc ...

  5. 10个造型奇特的css3进度条(有的html被编辑器转义了，上面的代码还是OK的)。。。转载

    <div id="caseVerte"> <div id="case1"></div> <div id="c ...

  6. java学习第05天（数组常见操作、数组中的数组）

    (4)数组常见操作 a.遍历取值 class ArrayDemo3 { public static void main(String[] args) { //System.out.println(&q ...

  7. Linux 并发链接数

    并发数查看   查看 TCP 协议连接数 netstat -n | awk '/^tcp/ {++S[$NF]} END {for(a in S) print a, S[a]}' SYN_RECV # ...

  8. caoha

  9. mybatis批量增加与删除——（十五）

    1.首先应该明白,mybatis增删改返回值是int型的影响行数的值 mapper接口 package cn.xm.mapper; import java.util.List; import cn.x ...

  10. 公共语言运行库(CLR)开发系列课程(3)：COM Interop基础 学习笔记

    上章地址 什么是COM Component Object Model 组建对象模型 基于接口(Interface) 接口=协议 IID 标识接口 V-table 虚表 方式调用 单继承 对象(Obje ...