前端開發(fā)：JavaScript 通知庫

文為大家推薦一些實(shí)用的JavaScript 通知庫，希望在今后的前端過程中有所幫助！

1、noty（jQuery 通知插件）

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

3、humane-js（一個簡單、時髦的瀏覽器通知系統(tǒng)）

4、smoke.js（與框架無關(guān)的、能夠自定義樣式的 JavaScript 彈框系統(tǒng)）

5、messenger（為你的應(yīng)用添加 Growl-style 彈框和信息（Crowl 是 Mac OS X 下的一個通知系統(tǒng)））

6、toastr（用來顯示簡單的，會自動到期的信息窗口）簡單的彈出框通知）

切版 qieban(.cn)

.背景：
即時通訊、桌面端app開發(fā)、當(dāng)用戶和用戶聊天，當(dāng)發(fā)送聊天消息時，須要作收到消息通知，因?yàn)橛玫降募夹g(shù)棧是electron、它也有自己的通知模塊、因?yàn)槠渌脑驎簳r用不了最后查到HTML5新增的 Notification API的通知功能。即便將瀏覽器窗口最小化，依然會收到消息通知、所以就先用它吧、后面再后話處理一下。

2.通知權(quán)限：
2.1 首先須要看瀏覽器是否支持 Notification ，支持才有下文，不然就此止步；
2.2 經(jīng)過 Notification.permission 檢測用戶是否容許通知：

// Notification.permission==='granted' 用戶容許
// Notification.permission==='denied' 用戶拒絕
// Notification.permission==='denied' 不知道用戶的選擇，默認(rèn)

if(Notification.permission==='granted'){
    console.log('用戶容許通知');
    instance_init(title, options);
}else if(Notification.permission==='denied'){
    console.log('用戶拒絕通知');
}else{
    console.log('用戶還沒選擇，去向用戶申請權(quán)限吧');
    Notification.requestPermission(function(status) {
    	if(status=='granted'){
    		console.log('用戶容許通知');
    		instance_init(title, options);
    	}else if(status=='denied'){
    		console.log('用戶拒絕通知');
    	}else{
    		console.log('用戶還沒選擇');
    	}
    });
}

3. 主要用到的參數(shù)。其他參數(shù)了解：notification - Web API 接口參考 | MDNMDN Web DocsMDN logoMozilla logo

title：通知的標(biāo)題
options：通知的設(shè)置選項(xiàng)（可選）。
	body：通知的內(nèi)容。
	tag：表明通知的一個識別標(biāo)簽，相同tag時只會打開同一個通知窗口。
	icon：要在通知中顯示的圖標(biāo)的URL。
	image：要在通知中顯示的圖像的URL。
	data：想要和通知關(guān)聯(lián)的任務(wù)類型的數(shù)據(jù)。
	requireInteraction：通知保持有效不自動關(guān)閉，默認(rèn)為false。

4.代碼實(shí)現(xiàn)

4.1原生html5方式

<html>

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

	<body>
		<script type="text/javascript">
			// 調(diào)用通知方法
			showMsgNotification('狀態(tài)更新提醒','你的朋友圈有3條新狀態(tài)，快去查看吧');
			/**
			 * H5通知功能 
			 */
			function showMsgNotification(out_title, out_msg) {
				var title=out_title ? out_title : '更新狀態(tài)標(biāo)題';
				var options={
					body: out_msg ? out_msg : "更新狀態(tài)內(nèi)容", // 通知主體
					requireInteraction: true, // 不自動關(guān)閉通知
					icon: 'http://img18.house365.com/newcms/2017/03/16/148964317858ca26aacf7b5.jpg', // 通知圖標(biāo) 
					tag: 'hangge',
				};
				var Notification=window.Notification || window.mozNotification || window.webkitNotification; // 瀏覽器作兼容處理
				if(Notification) { //支持桌面通知
					if(Notification.permission=="granted") { //已經(jīng)容許通知
						instance_init(title, options);
					} else {
						//第一次詢問或已經(jīng)禁止通知(若是用戶以前已經(jīng)禁止顯示通知，那么瀏覽器不會再次詢問用戶的意見，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');
							// 關(guān)閉通知
							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方式、調(diào)用即可

Web應(yīng)用的前端資源（如JavaScript文件、CSS樣式表等）更新后，用戶的瀏覽器可能仍使用緩存的舊版本，這可能導(dǎo)致應(yīng)用運(yùn)行錯誤或顯示不正確。因此，通知用戶刷新網(wǎng)頁以加載最新版本的資源是至關(guān)重要的。

使用版本哈希標(biāo)記文件

為了確保用戶總是加載最新的文件，可以在文件名中加入版本哈希值。

1. 自動生成哈希值

在構(gòu)建過程中，使用工具（如Webpack）自動為文件名添加哈希值。

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

2. HTML引用更新

確保HTML文件引用帶有哈希值的最新文件。

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

實(shí)現(xiàn)前端輪詢檢查更新

通過在客戶端使用JavaScript定期輪詢服務(wù)器檢查更新，可以在檢測到新版本時提示用戶刷新。

1. 創(chuàng)建更新檢查接口

在服務(wù)器端創(chuàng)建一個API接口，返回當(dāng)前的應(yīng)用版本。

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

2. 前端輪詢邏輯

使用JavaScript定期請求更新檢查接口，并與當(dāng)前版本比較。

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進(jìn)行實(shí)時更新通知

WebSockets允許服務(wù)器主動向客戶端發(fā)送消息，這適用于實(shí)時通知用戶刷新頁面。

1. 建立WebSocket連接

在前端建立一個WebSocket連接，監(jiān)聽服務(wù)器的消息。

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

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

2. 服務(wù)器端發(fā)送更新通知

在服務(wù)器端檢測到新版本時，通過WebSocket發(fā)送消息給所有連接的客戶端。

# 假設(shè)使用Python的WebSocket庫
def notify_clients():
    for client in clients:
        client.send('New version available')

使用Service Workers實(shí)現(xiàn)后臺更新

Service Workers可以攔截網(wǎng)絡(luò)請求并實(shí)現(xiàn)資源的緩存管理，適用于在后臺更新資源。

1. 注冊Service Worker

在主JavaScript文件中注冊Service Worker。

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

2. 編寫Service Worker

在Service Worker中，攔截請求并實(shí)現(xiàn)資源的緩存策略。

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // 返回緩存中的資源或發(fā)起網(wǎng)絡(luò)請求
      })
  );
});

結(jié)論

有效地通知用戶前端更新是確保Web應(yīng)用正常運(yùn)行的關(guān)鍵。通過版本哈希標(biāo)記、定期輪詢、WebSocket實(shí)時通知或Service Workers，開發(fā)者可以確保用戶總是使用最新的應(yīng)用版本。每種方法都有其適用場景，開發(fā)者可以根據(jù)自己的需要選擇最合適的實(shí)現(xiàn)方式。

在線咨詢

上一篇：Spring Boot實(shí)戰(zhàn)之輕松掌握3種靜態(tài)資源處
下一篇：Missive for Mac(協(xié)作式電子郵件客戶端

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商