前端开发：JavaScript 通知库

文为大家推荐一些实用的JavaScript 通知库，希望在今后的前端过程中有所帮助！

1、noty（jQuery 通知插件）

2、pnotify（适用于 Bootstrap、jQuery UI 和 Web Notifications Draft 的 JavaScript 通知库）

3、humane-js（一个简单、时髦的浏览器通知系统）

4、smoke.js（与框架无关的、能够自定义样式的 JavaScript 弹框系统）

5、messenger（为你的应用添加 Growl-style 弹框和信息（Crowl 是 Mac OS X 下的一个通知系统））

6、toastr（用来显示简单的，会自动到期的信息窗口）简单的弹出框通知）

切版 qieban(.cn)

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

2.通知权限：
2.1 首先须要看浏览器是否支持 Notification ，支持才有下文，不然就此止步；
2.2 经过 Notification.permission 检测用户是否容许通知：

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

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

4.代码实现

4.1原生html5方式

<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方式、调用即可

Web应用的前端资源（如JavaScript文件、CSS样式表等）更新后，用户的浏览器可能仍使用缓存的旧版本，这可能导致应用运行错误或显示不正确。因此，通知用户刷新网页以加载最新版本的资源是至关重要的。

使用版本哈希标记文件

为了确保用户总是加载最新的文件，可以在文件名中加入版本哈希值。

1. 自动生成哈希值

在构建过程中，使用工具（如Webpack）自动为文件名添加哈希值。

// Webpack配置示例
output: {
    filename: '[name].[contenthash].js',
}

2. HTML引用更新

确保HTML文件引用带有哈希值的最新文件。

<script src="bundle.2e8ebe5e.js"></script>

实现前端轮询检查更新

通过在客户端使用JavaScript定期轮询服务器检查更新，可以在检测到新版本时提示用户刷新。

1. 创建更新检查接口

在服务器端创建一个API接口，返回当前的应用版本。

# Flask示例
@app.route('/version')
def version():
    return jsonify(version='1.0.2')

2. 前端轮询逻辑

使用JavaScript定期请求更新检查接口，并与当前版本比较。

const currentVersion='1.0.1';

setInterval(()=> {
  fetch('/version')
    .then(response=> response.json())
    .then(data=> {
      if (data.version !==currentVersion) {
        alert('A new version is available. Please refresh the page.');
      }
    });
}, 60000); // 每60秒检查一次

利用WebSockets进行实时更新通知

WebSockets允许服务器主动向客户端发送消息，这适用于实时通知用户刷新页面。

1. 建立WebSocket连接

在前端建立一个WebSocket连接，监听服务器的消息。

const socket=new WebSocket('wss://your-server.com/updates');

socket.onmessage=function(event) {
  alert('A new version is available. Please refresh the page.');
};

2. 服务器端发送更新通知

在服务器端检测到新版本时，通过WebSocket发送消息给所有连接的客户端。

# 假设使用Python的WebSocket库
def notify_clients():
    for client in clients:
        client.send('New version available')

使用Service Workers实现后台更新

Service Workers可以拦截网络请求并实现资源的缓存管理，适用于在后台更新资源。

1. 注册Service Worker

在主JavaScript文件中注册Service Worker。

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js');
}

2. 编写Service Worker

在Service Worker中，拦截请求并实现资源的缓存策略。

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // 返回缓存中的资源或发起网络请求
      })
  );
});

结论

有效地通知用户前端更新是确保Web应用正常运行的关键。通过版本哈希标记、定期轮询、WebSocket实时通知或Service Workers，开发者可以确保用户总是使用最新的应用版本。每种方法都有其适用场景，开发者可以根据自己的需要选择最合适的实现方式。

在线咨询

上一篇：Spring Boot实战之轻松掌握3种静态资源处
下一篇：Missive for Mac(协作式电子邮件客户端

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商