在 Android WebView (Cordova) 中检查互联网连接 [英] Check internet connection in Android WebView (Cordova)

问题描述

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

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

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

我试过了:

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

代码:

I know there is a lot of questions and answers about this in Stackoverflow, I read a lot of them, but none of them work.

I clarified in the title Android WebView because it is the most important target, but I would like this works in other devices too. I tested the following code on a app built with Intel XDK installed on a SM-G355M with Android 4.4.2 and on Safari installed on an iPhone 5C with iOS 9.3.4;

All I get in both cases is the same value, true (sometimes I get false even I have an internet connection).

I tried:

1. navigator.onLine, it gives always the same value.
2. document.addEventListener("online", ... doesn't trigger
3. ajax doesn't work, anyway doesn't affect to the server?

Code: https://nanilab.com/stackoverflow/webview-internet-connection.php(This link is now broken)

---

Option 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);
}

Option 2:

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

Option 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);
    }
}

---

app built with Intel XDK installed on a SM-G355M with Android 4.4.2

https://youtu.be/wHJHG5dP_eM

---

What I am doing wrong?

解决方案

Apache Cordova (was called PhoneGap) is an open-source mobile development framework. It allows you to use standard web technologies - HTML5, CSS3, and JavaScript for cross-platform development. Applications execute within wrappers targeted to each platform, and rely on standards-compliant API bindings to access each device's capabilities such as sensors, data, network status, etc. document reference cordova

In your problem (Option 1):

navigator.onLine 

...is not working because (on android) it is broken {the "raw" version, Cordova enabled webview is different}(as you have found out), you have to built your WebView App with the Cordova Framework. Cordova was developed EXACTLY to solve this problem. The GAP in PhoneGap is the gap between the "virtual machine", "sandbox" and access to the hardware, AND it's cross-platform.

Android Permissions: app/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 Permissions: app/res/xml/config.xml

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

Quick Guide Cordova installation

goto web page for installation instructions

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

goto web page and download nodejs for your system

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

example file

node-v4.5.0-x86.msi

run (install it)

success.

on Windows:

C:>npm install -g cordova

And away you go!

I have built your code into cordova, I'm getting there (hopefully, hard problem), here's some image's of what I have so far [not in WebView exactly yet, {see the navigator.userAgent output in the second image}] (notice the event listener is working ;O), but not good enough:o( ).

这篇关于在 Android WebView (Cordova) 中检查互联网连接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！