整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
文為大家推薦一些實用的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樣式表等）更新后，用戶的瀏覽器可能仍使用緩存的舊版本，這可能導致應用運行錯誤或顯示不正確。因此，通知用戶刷新網頁以加載最新版本的資源是至關重要的。
為了確保用戶總是加載最新的文件，可以在文件名中加入版本哈希值。
在構建過程中，使用工具（如Webpack）自動為文件名添加哈希值。
// Webpack配置示例
output: {
filename: '[name].[contenthash].js',
}
確保HTML文件引用帶有哈希值的最新文件。
<script src="bundle.2e8ebe5e.js"></script>
通過在客戶端使用JavaScript定期輪詢服務器檢查更新，可以在檢測到新版本時提示用戶刷新。
在服務器端創建一個API接口，返回當前的應用版本。
# Flask示例
@app.route('/version')
def version():
return jsonify(version='1.0.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允許服務器主動向客戶端發送消息，這適用于實時通知用戶刷新頁面。
在前端建立一個WebSocket連接，監聽服務器的消息。
const socket=new WebSocket('wss://your-server.com/updates');
socket.onmessage=function(event) {
alert('A new version is available. Please refresh the page.');
};
在服務器端檢測到新版本時，通過WebSocket發送消息給所有連接的客戶端。
# 假設使用Python的WebSocket庫
def notify_clients():
for client in clients:
client.send('New version available')
Service Workers可以攔截網絡請求并實現資源的緩存管理，適用于在后臺更新資源。
在主JavaScript文件中注冊Service Worker。
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js');
}
在Service Worker中，攔截請求并實現資源的緩存策略。
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request)
.then(function(response) {
// 返回緩存中的資源或發起網絡請求
})
);
});
有效地通知用戶前端更新是確保Web應用正常運行的關鍵。通過版本哈希標記、定期輪詢、WebSocket實時通知或Service Workers，開發者可以確保用戶總是使用最新的應用版本。每種方法都有其適用場景，開發者可以根據自己的需要選擇最合適的實現方式。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
