如何检查Electron Framework中是否有可用的Internet连接

本文概述

• 没有库
• 有库

如果你的项目通过服务器提供身份验证或从Web检索资源, 则可能要实现一种方法来检查用户是否在线。

没有库

你无需任何库即可检查电子中的有效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中的库资源库。

玩得开心 ！