HTML5 桌面通知 new Notification

241阅读模式

1.背景:
即时通讯、桌面端app开发、当用户和用户聊天,当发送聊天消息时,须要作收到消息通知,因为用到的技术栈是electron、它也有自己的通知模块、因为其他的原因暂时用不了 最后查到HTML5新增的 Notification API的通知功能。即便将浏览器窗口最小化,依然会收到消息通知、所以就先用它吧、后面再后话处理一下。文章源自懂站帝-http://www.sfdkj.com/14019.html

2.通知权限:
2.1 首先须要 看浏览器是否支持 Notification ,支持才有下文,不然就此止步;
2.2 经过 Notification.permission 检测用户是否容许通知:文章源自懂站帝-http://www.sfdkj.com/14019.html

// Notification.permission === 'granted' 用户容许
// Notification.permission === 'denied' 用户拒绝
// Notification.permission === 'denied' 不知道用户的选择,默认

if(Notification.permission === 'granted'){
    console.log('用户容许通知');
    instance_init(title, options);
}else if(Notification.permission === 'denied'){
    console.log('用户拒绝通知');
}else{
    console.log('用户还没选择,去向用户申请权限吧');
    Notification.requestPermission(function(status) {
    	if(status=='granted'){
    		console.log('用户容许通知');
    		instance_init(title, options);
    	}else if(status=='denied'){
    		console.log('用户拒绝通知');
    	}else{
    		console.log('用户还没选择');
    	}
    });
}

3. 主要用到的参数。其他参数了解:notification - Web API 接口参考 | MDNMDN Web DocsMDN logoMozilla logo文章源自懂站帝-http://www.sfdkj.com/14019.html

title:通知的标题
options:通知的设置选项(可选)。
	body:通知的内容。
	tag:表明通知的一个识别标签,相同tag时只会打开同一个通知窗口。
	icon:要在通知中显示的图标的URL。
	image:要在通知中显示的图像的URL。
	data:想要和通知关联的任务类型的数据。
	requireInteraction:通知保持有效不自动关闭,默认为false

4.代码实现文章源自懂站帝-http://www.sfdkj.com/14019.html

4.1原生html5方式文章源自懂站帝-http://www.sfdkj.com/14019.html

<html>

	<head>
		<meta charset="UTF-8">
		<title>H5通知功能 </title>
	</head>

	<body>
		<script type="text/javascript">
			// 调用通知方法
			showMsgNotification('状态更新提醒','你的朋友圈有3条新状态,快去查看吧');
			/**
			 * H5通知功能 
			 */
			function showMsgNotification(out_title, out_msg) {
				var title = out_title ? out_title : '更新状态标题';
				var options = {
					body: out_msg ? out_msg : "更新状态内容", // 通知主体
					requireInteraction: true, // 不自动关闭通知
					icon: 'http://img18.house365.com/newcms/2017/03/16/148964317858ca26aacf7b5.jpg', // 通知图标 
					tag: 'hangge',
				};
				var Notification = window.Notification || window.mozNotification || window.webkitNotification; // 浏览器作兼容处理
				if(Notification) { //支持桌面通知
					if(Notification.permission == "granted") { //已经容许通知
						instance_init(title, options);
					} else {
						//第一次询问或已经禁止通知(若是用户以前已经禁止显示通知,那么浏览器不会再次询问用户的意见,Notification.requestPermission()方法无效)
						Notification.requestPermission(function(status) {
							if(status === "granted") { //用户容许
								instance_init(title, options);
							} else { //用户禁止
								console.log('禁止')
								return false
							}
						});
					}
					/**
					 * Notification定义
					 * */
					function instance_init(title, options){
						var instance = new Notification(title, options);
						instance.onclick = function() {
							console.log('onclick');
							// 关闭通知
							instance.close();
						};
						instance.onerror = function() {
							console.log('onerror');
						};
						instance.onshow = function() {
							console.log('onshow');
						};
						instance.onclose = function() {
							console.log('onclose');
						};
					}
				} else { //不支持(IE等)
					console.log("不支持的浏览器")
				}
			}
		</script>
	</body>

</html>

4.2 electron方式、调用即可文章源自懂站帝-http://www.sfdkj.com/14019.html

export const getNotification = (cb?: () => void) => {
  if (Notification && (Notification.permission === "default" || Notification.permission === "denied")) {
    Notification.requestPermission((permission) => {
      if (permission === "granted") {
        cb && cb();
      }
    });
  } else {
    cb && cb();
  }
};
export const createNotification = (message: MessageItem, click?: (id: string, type: any) => void, tag?: string) => {
  if (Notification && document.hidden) {
    const title = message.fromName;
    const notification = new Notification(title, {
      dir: "auto",
      tag: tag ?? (message.id === "" ? message.conversationId : message.id),
      renotify: true,
      icon: icons,
      body: parseMessageType(message),
      requireInteraction: true,
    });
    const id = message.conversationId;
    notification.onclick = () => {
      click && click(id, message.type);
      notification.close();
    };
  }
};
文章源自懂站帝-http://www.sfdkj.com/14019.html
懂站帝
  • 本文由 发表于 2022年6月11日 01:04:32
  • 版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至395045033@qq.com举报,一经查实,本站将立刻删除。