HTML5开启浏览器桌面通知 Web Notification
说明：
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的更多相关文章
- 浏览器开启桌面通知Web Notification
本文主要描述如何开启各个浏览器的桌面通知功能 一.谷歌浏览器(chrome) 点击地址栏前面的图标
- H5 notification浏览器桌面通知
Notification是HTML5新增的API,用于向用户配置和显示桌面通知.上次在别的网站上看到别人的通知弹窗,好奇之余也想知道如何实现的.实际去查一下发现并不复杂,且可以说比较简单,故写篇博客分 ...
- HTML5桌面通知(Web Notifications)实例解析
先上一段代码,ie不支持,Chrome.fireFox.Opera支持 <!DOCTYPE html> <html> <head> <meta http-eq ...
- 浏览器桌面通知Notification实践
一言不合就上图: 最近常常在浏览器看到这样的消息推送,还有QQ.com的推送,现在我对这个不了解,不知道叫消息自动推送对不对,这个时chrome浏览器的截图,出现在右下角,其他浏览器的样式可能有些微差 ...
- 介绍一个比较酷东西：HTML5 桌面通知（Notification API）
Notification API 是 HTML5 新增的桌面通知 API,用于向用户显示通知信息.该通知是脱离浏览器的,即使用户没有停留在当前标签页,甚至最小化了浏览器,该通知信息也一样会置顶显示出来 ...
- 浏览器桌面通知--Notification
前言 最近项目上要用到浏览器桌面通知,之前虽然知道有这个东西,但是一直没有用过,借此机会了解下桌面通知的机制,在此分享下. 1.权限 首先需要明确的是,不是所有网页都可以发桌面通知的,不然不得烦死,那 ...
- 浏览器桌面通知Notification探究
首先说明,这篇博文不是科普讲解的,而是立flag研究的,是关于浏览器消息自动推送,就是下面这个玩意: 最近常常在浏览器看到这样的消息推送,还有QQ.com的推送,现在我对这个不了解,不知道叫消息自动推 ...
- HTML5 桌面通知：Notification API
原文地址:http://blog.gdfengshuo.com/article/23/ 前言 Notification API 是 HTML5 新增的桌面通知 API,用于向用户显示通知信息.该通知是 ...
- 浏览器桌面通知（notifications）
近期在做公司后台管理系统,当有任务到来时,须要通知当事人,可是 当事人有可能在做别的,浏览器有可能会被最小化,这样就非常难看到通知了.经过查找发现有些浏览器能够使用noitfications.能够在桌 ...
随机推荐
- JAVA记录-IntelliJ Idea 2017 免费激活方法（转载）
1. 到网站 http://idea.lanyus.com/ 获取注册码. 2.填入下面的license server: http://intellij.mandroid.cn/ http://ide ...
- Spring MVC 中 @ModelAttribute 注解的妙用
Spring MVC 中 @ModelAttribute 注解的妙用 Spring MVC 提供的这种基于注释的编程模型,极大的简化了 web 应用的开发.其中 @Controller 和 @Rest ...
- laravel一个页面两个表格分页处理
关键是看懂laravel自带的 paginate() 方法. 在Builder.php文件(项目名称/laravel/vendor/laravel/framework/src/Illuminate/D ...
- Ajax和jsonp区别
大多数情况下,无论是框架还是自己实现都是通过Ajax的方式来向后端请求数据的,而Ajax之间是通过传输json格式的文件来进行数据的传输的,大家对Ajax也很熟悉了,那么为什么我又要使用jsonp呢? ...
- HDU 1251 统计难题 字符匹配
题目描述:先说明此题只有一个测试实例,然后输入一系列的单词,以一个回车为结束符,然后输入一个字符串,要你查找以这个字符串为前缀的单词的个数,处理到文件结束. 解题报告:一开始看到这题,竟然直接用暴力去 ...
- git与代码托管工具
1.git初识 git是一个版本管理工具,用来管理项目的不同的版本,记录下不同的提交记录,git还可以构建不同的分支,用来给不同的人来推送使用. 推荐的git教程:https://www.cnblog ...
- MySQL binlog导入失败
一个同事问我,说他用innobackupex恢复数据后用mysqlbinlog导入增量数据时,发现数据没有导入进去并且也没有报错. mysqlbinlog /u01/mysql_py/database ...
- Visual Studio 2013/2015/2017快捷键（转）
英文原文:19 Must-Know Visual Studio Keyboard Shortcuts 项目相关的快捷键 Ctrl + Shift + B = 生成项目 Ctrl + Alt + L = ...
- WPF中各个Template的分析(转)
作为新手,还是没看明白本文,留着以后再学习 在使用TabControl.ListView.Menu.TreeView的时候被各种Template搞得头昏眼花,决心把这个问题搞清楚,究竟什么时候该用什么 ...
- 001_fpm打包命令详解
使用fpm来制作rpm包 2017/2/22 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 ...