本文概述
- 没有库
- 有库
没有库 你无需任何库即可检查电子中的有效Internet连接, 因为你只需在窗口中使用navigator变量的onLine属性即可。
function isOnline(){
return navigator.onLine;
}
真的简单又实用吗?但是我们可以做得更好!
通过对话框和” 重试功能” 美化该功能, 仅当存在活动连接时才会执行:
function isOnline(user_callback){
/**
* Show a warning to the user.
* You can retry in the dialog until a internet connection
* is active.
*/
var message = function(){
const {dialog} = require('electron').remote;
return dialog.showMessageBox({
title:"There's no internet", message:"No internet available, do you want to try again?", type:'warning', buttons:["Try again please", "I don't want to work anyway"], defaultId: 0
}, function(index){
// if clicked "Try again please"
if(index == 0){
execute();
}
})
};
var execute = function(){
if(navigator.onLine){
// Execute action if internet available.
user_callback();
}else{
// Show warning to user
// And "retry" to connect
message();
}
};
// Verify for first time
execute();
}// Use it, the alert("Hello world");
will be executed only if there's an active internet connection.
isOnline(function(){
alert("Hello world !");
});
文章图片
多亏了对话框模块, 你的应用在运行的同时会看起来不错。
但是, 在某些情况下, 根据你的条件, navigator.onLine可能会失败, 但是为什么呢?要正确理解为什么会发生这种情况, 你需要根据此属性知道什么意味着在线。
真正的意思是在线
关于” 在线” 的含义似乎有些混乱。考虑互联网是一堆网络, 但是有时你使用的是VPN, 却无法访问” 一般” 互联网或万维网。公司通常都有自己的网络, 这些网络与其他外部网络的连接受到限制, 因此可以将你视为” 在线” 。
根据属性在线, 仅意味着你已连接到网络, 而不意味着要连接的服务的可用性或可达性。
如果因为在VPN上而不能使用navigator.onLine, 则需要向某个URL发出请求, 并根据请求的结果(代码)提供状态。
有库 如果你想提供更好的用户体验, 可以使用一个库来为你处理该过程。
文章图片
Offline.js是一个库, 用于在用户失去Internet连接时自动提醒你。它捕获连接断开时发出的AJAX请求, 并在备份时重新制作它们, 因此你的应用程序反应完美。
它具有许多精美的主题, 无需配置。
在你的网站上包括javascript, 主题之一和语言之一, 你就完成了!要仅使用没有UI指示器的JavaScript API, 只需忽略CSS文件。
如果你想看看它在你网站上的外观, 请断开互联网连接, 或在首页中试用模拟器。在此处访问Github中的库资源库。
玩得开心 !
推荐阅读
- 如何在Electron Framework中将信息从一个窗口发送到另一个窗口
- Cachet(开源状态页系统解决方案)
- 如何在Electron Framework中包含和使用jQuery
- 如何下载Ubuntu更快地发布ISO文件(加速下载)
- 如何使用JavaScript从浏览器中检索计算机的视频卡名称/型号
- 如何将背景图像设置到Fabric.js画布
- 如何在Windows 10中使用命令行在Google Chrome中打开具有特定窗口大小的URL
- Scrollview to PDF查看Android中的模糊
- Android(滚动并不是一直到底)