如何定期检查 Phonegap 中的互联网连接？答案

【问题标题】：How to check internet connection in Phonegap periodically?如何定期检查 Phonegap 中的互联网连接？
【发布时间】：2013-06-29 06:51:55
【问题描述】：

我正在使用 Phonegap。我需要定期检查网络连接。实际上我正在从服务器获取一些数据。如果没有连接，我需要显示错误警报。

我搜索了它并找到了解决方案。但这不行。因为我需要定期检查连接。

<html>
  <head>
    <title>navigator.network.connection.type Example</title>
    <script type="text/javascript" charset="utf-8" src="phonegap-1.0.0.js"></script>
    <script type="text/javascript" charset="utf-8">
    // Wait for PhoneGap to load
    document.addEventListener("deviceready", onDeviceReady, false);
    function onDeviceReady() {
        checkConnection();
    }

    function checkConnection() {
        var networkState = navigator.network.connection.type;
        var states = {};
        states[Connection.UNKNOWN]  = 'Unknown connection';
        states[Connection.ETHERNET] = 'Ethernet connection';
        states[Connection.WIFI]     = 'WiFi connection';
        states[Connection.CELL_2G]  = 'Cell 2G connection';
        states[Connection.CELL_3G]  = 'Cell 3G connection';
        states[Connection.CELL_4G]  = 'Cell 4G connection';
        states[Connection.NONE]     = 'No network connection';
        alert('Connection type: ' + states[networkState]);
    }
    </script>
  </head>
  <body>
    <p>A dialog box will report the network state.</p>
  </body>
</html>

它仅在应用程序第一次启动时检查。但是我需要定期检查它，因为我正在做套接字编程。如果互联网有问题，我需要显示它。但此代码仅在启动时显示。

【问题讨论】：

标签： javascript cordova jquery-mobile

【解决方案1】：

工作示例：http://jsfiddle.net/Gajotres/d5XYR/

使用间隔计时器在每个预定义的时间检查互联网连接。此解决方案需要 HTML5 浏览器，但这不是问题，因为 jQuery Mobile 已经需要 HTML5 浏览器。在这种情况下，计时器将每 100 毫秒检查一次互联网连接，并将最终结果设置为 javascript 全局变量。

一切都取决于这一行：

window.navigator.onLine -- it will be false if the user is offline.

最终解决方案：

var connectionStatus = false;

$(document).on('pagebeforeshow', '#index', function () {
    setInterval(function () {
        connectionStatus = navigator.onLine ? 'online' : 'offline';
    }, 100);
    $(document).on('click', '#check-connection', function () {
        alert(connectionStatus);
    });
});

测试日期：

Windows 火狐
Windows 谷歌浏览器
Windows IE9 和 IE10
Android 4.1.1 Chrome
iPad 3 Safari
iPad3 Chrome

【讨论】：

我已经添加了这个解决方案成功运行的平台。至少在我自己测试过的地方。
谢谢..你检查了我上周五发给你的项目代码吗。
我在您的 ID 上发送了问题，我能够解决该问题但我需要询问我的编码风格是否正确？
你邮寄给我了吗？我有一个忙碌的虚弱，所以我什么也没做。我会在接下来的 24 小时内给你发一封电子邮件。
在你的 gmail 上是的。我向你发送了我的代码，如有必要，请检查我的代码更改代码。实际上，使用该代码它在设备上波动，我认为我编码错误。我用 ID 邮寄给你nksharma@q3tech.com 和 naveen.nsit89@gmail.com

【解决方案2】：

也许您可以使用文档上的“在线”和“离线”事件侦听器来通知您的应用何时在线或离线，如文档中所述，例如。这里：http://docs.phonegap.com/en/3.2.0/cordova_events_events.md.html#online

【讨论】：

【解决方案3】：

不幸的是，Chrome 和 Safari 以及一些移动浏览器上的答案并不稳定。它不会为您提供“真正的 Internet 连接”状态，而是“网络连接状态”。见：

https://developer.mozilla.org/en-US/docs/Web/API/window.navigator.onLine

"在 Chrome 和 Safari 中，如果浏览器无法连接到局域网 (LAN) 或路由器，则它处于脱机状态；所有其他条件都返回 true。因此，虽然您可以假设浏览器在以下情况下处于脱机状态它返回一个假值，你不能假设一个真值一定意味着浏览器可以访问互联网。你可能会得到误报，例如在计算机运行的虚拟化软件的情况下，该软件具有始终可用的虚拟以太网适配器“已连接。”因此，如果您真的想确定浏览器的在线状态，您应该开发额外的检查方法。要了解更多信息，请参阅 HTML5 Rocks 文章，Working Off the Grid。”

查看这篇 HTML5 Rocks 文章以获得真正稳定的解决方案 - 当然还有更多工作：

http://www.html5rocks.com/en/mobile/workingoffthegrid/

【讨论】：

问题是关于 PhoneGap，而不是移动 Chrome 或 Safari。
我的回答与移动浏览器有关，因为在新的 Android 上，WebView 是 Chrome，而在 iOS 上，WebView 一直是 Safari。此外，即使在 Kitkat 之前的 Android 版本上，webview 在这方面也接近于 chrome。

【解决方案4】：

试试这个代码，

<script>
        $(document).ready(function () {
            document.addEventListener("deviceready", onDeviceReady, false);
            document.addEventListener("online", onOnline, false);
            document.addEventListener("offline", onOffline, false);

        function onDeviceReady() {
            //onDeviceReaddy
        }

        function onOnline() {
            //onOnline
        }

        function onOffline() {
            navigator.notification.alert(
                'Please Check your internet connection.', // message
                null, // callback
                'AllCare Doctor', // title
                'OK' // buttonName
            );
        }

 </script>

更多详情请点击Here..!

【讨论】：