我最近遇到一个需求,要给网站添加一个用户网络离线提醒。要求我们要实时监测用户的网络状态,当用户断网了,我们要立马给用户弹出一个断网提醒。
那你可能会问,为什么要做这么一个需求呢?用户断网了,网页不就加载不出来了吗?用户不就知道了吗?
哈哈这确实也是一种情况,但是这只其中一种情况,在现实中更多的情况是,用户在访问我们的网站时发生断网,这时我们的网站数据已经被浏览器缓存,因此在网站上并看不出有什么不同。只有在加载新内容的情况下才会有所区别。那当然这样给用户的体验是十分不好的,所以我们要在用户网络断开的时候,给用户弹出一个弹框。来告诉用户网站新内容加载不出来的原因。来提高用户的体验感
我们可以利用navigator.onLine
API 来检测网络状态。navigator.onLine
会返回一个布尔值来显示用户是否在线。true
表示在线,false
表示离线,只要浏览器连接到网络的状态发生改变,属性值就会发生改变
我们可以监听网页加载事件,在网页加载时获取navigator.onLine
的值
window.addEventListener('load', () => {
const status = navigator.onLine;
});
上面的做法在网站最开始加载的时,是可以准确获取用户的网站状态的。但是有一个缺点,就是当获取完用户的网络状态后,网络又发生改变,状态值会无法及时更新!!!
我们可以写一个监听断网和联网来解决这个问题
window.addEventListener('offline', (e) => {
console.log('offline');
});
window.addEventListener('online', (e) => {
console.log('online');
});
那我们来做一个完整的小案例来监测我们的用户是否断网
<div class="status">
<div class="offline-msg">你的网络断开了 😢</div>
<div class="online-msg"> 你已经连上网络 🔗</div>
</div>
html, body {
padding: 0;
margin: 0;
}
.status {
background: #efefef;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.offline .online-msg {
display: none;
}
.offline .offline-msg {
display: block;
}
div {
padding: 1rem 2rem;
font-size: 3rem;
border-radius: 1rem;
color: white;
font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
}
.online-msg {
background: green;
display: block;
}
.offline-msg {
background: red;
display: none;
}
const status1 = document.querySelector(".status");
//load 监听网页加载事件
window.addEventListener("load", () => {
const handleNetworkChange = () => {
if (navigator.onLine) {
//给status下的offline-msg和online-msg添加类名样式
status1.classList.remove("offline");
} else {
//给status下的offline-msg和online-msg添加类名样式
status1.classList.add("offline");
}
};
// online该事件在浏览器开始在线工作时触发
window.addEventListener("online", handleNetworkChange);
// offline该事件在浏览器开始离线工作时触发。
window.addEventListener("offline", handleNetworkChange);
});
或者你可以使用第三方库Offline.js
Offline.js 是一个 JavaScript 库,用于检测用户的在线和离线状态。它可以方便地监听网络连接状态的改变,并触发相应的事件。该库还提供了一些其他功能,如警报用户离线状态、离线页面缓存
up
(从离线切换到在线状态)和 down
(从在线切换到离线状态)。开发者可以通过 Offline.on(event, handler)
方法来监听这些事件,并在事件发生时执行自定义的回调函数。伙伴们,如果你觉得我写的文章对你有帮助就给zayyo点一个赞👍或者关注➕都是对我最大的支持。当然你也可以关注我的微信公众号:Gavin的技术分享,我邀你进我的前端学习交流群,一起学习前端,成为更优秀的工程师~
我正在参与2023腾讯技术创作特训营第三期有奖征文,组队打卡瓜分大奖!
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。