javascript - 在 Android WebView (Cordova) 中检查互联网连接

Question

我知道在 Stackoverflow 中有很多关于此的问题和答案，我阅读了很多，但没有一个有效。

我在标题 Android WebView 中进行了说明，因为它是最重要的目标，但我希望它也适用于其他设备。我在使用 Intel XDK 构建的应用程序上测试了以下代码，该应用程序安装在 SM-G355M 和 Android 4.4.2 上 和安装在 iOS 9.3.4 的 iPhone 5C 上的 Safari；

我在这两种情况下得到的都是相同的值，true(有时我得到 false，即使我有互联网连接)。

我试过:

1. navigator.onLine，它总是给出相同的值。
2. document.addEventListener("online", ... 不触发
3. ajax 不起作用，反正对服务器没有影响？

代码: https://nanilab.com/stackoverflow/webview-internet-connection.php (此链接现已失效)

---

选项 1:

function option1(){
    var isOffline = 'onLine' in navigator && !navigator.onLine,
        text = isOffline == true ? ' without connection ' : ' connected ';

    $('.option-one span').text(text);
    $('.option-one i').text('checked').hide().fadeIn(200);

    setTimeout(function(){
        option1();
    }, 1000);
}

选项 2:

window.addEventListener("offline", function(){ $('.option-two span').text(' without connection'); }, false);
window.addEventListener("online", function(){ $('.option-two span').text(' connected'); }, false);

选项 3:

function option3(){
    $.ajax({
        url: '/stackoverflow/blank.php',
        success: function(data){
            print(' connected ');
        },
        error: function(jqXHR, textStatus, error) {
            print(' without connection ');
        }
    }); 

    function print(text){
        $('.option-three span').text(text);
        $('.option-three i').text('checked').hide().fadeIn(200);

        setTimeout(function(){
            option3();
        }, 2000);
    }
}

---

使用 Intel XDK 构建的应用安装在装有 Android 4.4.2 的 SM-G355M

https://youtu.be/wHJHG5dP_eM

---

我做错了什么？

Answer 1

Apache Cordova(称为 PhoneGap)是一个开源移动开发框架。它允许您为 使用标准 网络技术 - HTML5、CSS3 和 JavaScript跨平台开发。应用程序在针对每个平台的包装器中执行，并依靠符合标准的API 绑定(bind)来访问每个设备的功能，例如传感器、数据、网络状态 等 document reference cordova

在您的问题中(选项 1):

navigator.onLine 

...不工作因为(在android上)它坏了{“原始”版本，Cordova启用 webview 不同}(如您所知)，您必须使用 Cordova Framework 构建您的 WebView 应用程序。 Cordova 的开发完全 就是为了解决这个问题。 PhoneGap 中的 GAP 是“虚拟机”、“沙盒”和访问硬件之间的差距，并且它是跨平台的。

安卓权限:应用程序/AndroidManifest.xml

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />

Cordova 权限:应用程序/res/xml/config.xml

<feature name="NetworkStatus">
    <param name="android-package" value="org.apache.cordova.networkinformation.NetworkManager" />
</feature>

快速指南Cordova安装

转到网页以获取安装说明

https://cordova.apache.org/docs/en/latest/guide/cli/

转到网页并为您的系统下载 nodejs

https://nodejs.org/en/download/

示例文件

node-v4.5.0-x86.msi

运行(安装)

success.

在 Windows 上:

C:\>npm install -g cordova

离开吧!

我已将您的代码构建到 cordova 中，我正在到达那里(希望是难题)，这是我目前所拥有的一些图像 [不在 WebView 中确切地说，{请参阅第二张图片中的 navigator.userAgent 输出}](注意事件监听器正在工作；O)，但还不够好:o( )。