在Android WebView(Cordova)中检查网络连接

11

我知道在 Stackoverflow 上有很多关于这个问题的问答,我读了很多,但是没有一个有效。

我在标题中澄清了 Android WebView,因为这是最重要的目标,但我希望它也适用于其他设备。我在一个安装有 Intel XDK 的应用上测试了以下代码,在一个安装有 Android 4.4.2SM-G355M 和一个安装有 iOS 9.3.4iPhone 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的SM-G355M手机和Android 4.4.2系统构建的应用程序。

https://youtu.be/wHJHG5dP_eM


我做错了什么?


请尝试使用 https://github.com/apache/cordova-plugin-network-information。 - Harish Kommuri
@HarishKommuri 谢谢,但我希望它也能在移动浏览器中运行。有没有一些通用的解决方案? - agustin
插件所依赖的网络信息API也适用于Chrome 48+版本,但我不能确定它们是否完全兼容。请参考https://googlechrome.github.io/samples/network-information/index.html。 - Kagami Sascha Rosylight
1
这与Cordova有什么关系? - daserge
@daserge:“使用Intel XDK构建的应用程序[...]” - agustin
2个回答

7

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

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

navigator.onLine 

...因为(在android上)它已经损坏了{“原始”版本,启用了Cordovawebview不同},所以它不起作用(正如您发现的那样),您必须使用Cordova Framework构建您的WebView应用程序。 Cordova正是为了解决这个问题而开发的。PhoneGap中的GAP是“虚拟机”,“沙箱”和访问硬件之间的差距,并且它是跨平台的。

Android权限: 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 权限: app/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/

转到网页并下载适用于您系统的Node.js

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

示例文件

node-v4.5.0-x86.msi

运行(安装它)

success.

在Windows上:

C:\>npm install -g cordova

开始吧!

我已经将你的代码构建到cordova中,我正在努力(希望能解决这个难题),这是我目前为止的一些图像[还没有完全在WebView中,可以看到第二张图片中的navigator.userAgent输出](注意事件监听器正在工作;O),但还不够好:o( )。

demo image offline demo image online


1
在Chrome和Safari中,如果浏览器无法连接到本地区域网络(LAN)或路由器,则处于离线状态;所有其他情况均返回true。因此,尽管您可以假定浏览器在返回false值时处于离线状态,但不能假定true值必然意味着浏览器可以访问互联网。您可能会得到错误的阳性结果,例如在计算机运行具有始终“连接”的虚拟以太网适配器的虚拟化软件的情况下。因此,如果您真的想确定浏览器的在线状态,您应该开发额外的检查手段。要了解更多信息,请参见HTML5 Rocks文章http://www.html5rocks.com/en/mobile/workingoffthegrid/

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接