说明:

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. Flink窗口介绍及应用

    Windows是Flink流计算的核心,本文将概括的介绍几种窗口的概念,重点只放在窗口的应用上. 本实验的数据采用自拟电影评分数据(userId, movieId, rating, timestamp ...

  2. Hadoop生态圈-Azkaban实战之Command类型多job工作流flow

    Hadoop生态圈-Azkaban实战之Command类型多job工作流flow 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. Azkaban内置的任务类型支持command.ja ...

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

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

  4. JVM总结(一):概述--JVM运行时数据区

    大三下,趁着寒假重温一遍JVM,准备在一个系列来总价一下学习JVM的整个过程.争取在接下来的一个星期内更新完这一个系列,然后回家过年. JVM运行时数据区 线程私有的数据区 程序计数器 虚拟机栈 本地 ...

  5. mongodb与mysql的区别与具体应用场景

    MongoDB: 非关系型数据库,文档型数据库, 文档型数据库:可以存放xml,json,bson类型的数据.这些数据具备自述性(self-describing),呈现分层的树状数据结构.数据结构由键 ...

  6. Linux iptables常用命令的使用

    为什么会有本文 因为最近帮一个朋友布署一个上网梯子,他那边本来用的是v2ray,但是他想用ssr,但是安装配置ssr过程中出了很多问题,比如linux内核版本4.9有点老,不支持bbr加速.无法连接s ...

  7. Java SSM框架之MyBatis3(七)MyBatis之参数取值

    在mybatis中,参数取值方式有两种:#{ } 和 ${ } 一.#{ } select * from student where name=#{name} 编译后执行的sql语句: select ...

  8. ASP.NET MVC学习(二)之控制器Controller

    1.控制器 Controller接收用户请求,将Model和View匹配在一起,共同完成用户请求.它是一个分发器,通过选择不同的Model.View,可以决定完成不同的用户请求. 但Controlle ...

  9. CodeAction_beta02 斐波那契 (多维DP)

    题面: solution: 这题和斐波那契数列没有任何关系!!!!! 这题就是一个无脑DP!!!!!!!!!! 因为所有数都要出现至少一次,所以只需考虑其组合而不用考虑其排列,最后乘个 n!就是了(意 ...

  10. CF734F Anton and School (构造)

    \(solution\) : 这道题做法很巧妙,需要对位运算有足够了解: $( a $ & $ b )$ \(+\) $( a $ | $ b )$ \(=\) \(a+b\) ,所以有 \( ...