说明：

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. python实现windows Service服务程序

    python实现windows Service服务程序 win32serviceutil.ServiceFramework是封装得很好的Windows服务框架,本文通过继承它来实现. 通过SvcDoR ...

  2. Java基础-赋值运算符Assignment Operators与条件运算符Condition Operators

    Java基础-赋值运算符Assignment Operators与条件运算符Condition Operators 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.赋值运算符 表 ...

  3. list里面放的实体对象，页面用c:foreach应该怎么取？

    关于网友提出的" list里面放的实体对象,页面用c:foreach应该怎么取?"问题疑问,本网通过在网上对" list里面放的实体对象,页面用c:foreach应该怎么 ...

  4. 2018年10月14日ICPC南京站参赛总结

    这次比赛消耗掉了我们全部的信心和精力 在热身赛上,总体来说还是比较愉快的,这个时候心态就不对 正赛的时候我们遇到了A题签到题 我一开始是读错了题意了,认为这个题是一个裸的SG函数,而且那么多人秒过 W ...

  5. 贪心算法：Codevs 1044 拦截导弹

    ---恢复内容开始--- #include <iostream> #include <cstdio> #include <cstdlib> #include < ...

  6. jQuery总结或者锋利的jQuery笔记二

    第三章  jQuery 中 DOM 操作 , 进入这一章,你必须先要有 选择器的基础, 最好是基本选择器 (id,class,*,div,p 组合等) ,  层次选择器(div ul),(div> ...

  7. java CyclicBarrier以及和CountDownLatch的区别

    CyclicBarrier 的字面意思是可循环使用(Cyclic)的屏障(Barrier).让一组线程到达一个屏障(也可以叫同步点)时被阻塞,直到最后一个线程到达屏障时,屏障才会开门,所有被屏障拦截的 ...

  8. Python super() 函数

    super() 函数是用于调用父类(超类)的一个方法. super 是用来解决多重继承问题的,直接用类名调用父类方法在使用单继承的时候没问题,但是如果重定义某个方法,该方法会覆盖父类的同名方法,但有时 ...

  9. 【洛谷P2420】让我们异或吧

    题目描述 异或是一种神奇的运算,大部分人把它总结成不进位加法. 在生活中…xor运算也很常见.比如,对于一个问题的回答,是为1,否为0.那么: (A是否是男生 )xor( B是否是男生)＝A和B是否能 ...

  10. 底板芯片组与内存映射(Motherboard Chipsets and the Memory Map) 【转】

    转自:http://blog.chinaunix.net/uid-25909619-id-4194650.html 底板芯片组与内存映射 我打算写一些关于计算机内部构造(computer intern ...