2013-06-29 10 views
15

Ich arbeite mit Phonegap. Ich muss die Netzwerkverbindung regelmäßig überprüfen. Eigentlich bekomme ich Daten von einem Server. Wenn keine Verbindung besteht, muss ich eine Fehlermeldung anzeigen.Wie überprüfe ich regelmäßig die Internetverbindung in Phonegap?

Ich googelte es und fand die Lösung. Aber es ist nicht ok. Weil ich die Verbindung regelmäßig überprüfen muss.

<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> 

Es überprüft nur das erste Mal, wenn die Anwendung gestartet. Aber ich muss es regelmäßig überprüfen, weil ich Socket-Programmierung mache. Wenn es ein Problem mit dem Internet gibt, muss ich es zeigen. Aber dieser Code zeigt nur zur Startzeit.

Antwort

26

Arbeitsbeispiel: http://jsfiddle.net/Gajotres/d5XYR/

Verwenden Intervall-Timer Internetverbindung alle vordefinierten Zeit zu überprüfen. Diese Lösung erfordert einen HTML5-Browser, dies ist jedoch kein Problem, da jQuery Mobile bereits den HTML5-Browser benötigt. In diesem Fall überprüft der Timer alle 100 ms die Internetverbindung und setzt das Endergebnis in eine globale javascript-Variable.

Alles hängt von dieser Linie:

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

Endlösung:

var connectionStatus = false; 

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

Getestet auf:

  • Windows-Firefox

  • Windows-Google Chrome

  • Windows-IE9 und IE10

  • Android 4.1.1 Chrome

  • iPad 3 Safari

  • iPad3 Chrome

+1

Hallo ..ist das auf Tablet und ipad auch arbeiten? –

+0

Ich habe Plattformen hinzugefügt, wo diese Lösung erfolgreich funktioniert. Zumindest wo ich habe testete es selbst. – Gajotres

+0

Danke..haben Sie überprüfen Mein Projektcode, wie ich dir letzten Freitag geschickt habe. –

4

Leider ist die Antwort Nicht stabil auf Chrome und Safari sowie mehreren mobilen Geräten Owen. Es gibt Ihnen nicht den Status "echte Internetverbindung", sondern den Status "Netzwerkverbindung". Siehe:.

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

„In Chrome und Safari, wenn der Browser auf einem lokalen Netzwerk (LAN) oder einen Router anschließen nicht in der Lage ist, ist offline, alle anderen Bedingungen erfüllt zurückkehren So, während Sie kann davon ausgehen, dass der Browser offline ist, wenn er einen falschen Wert zurückgibt, können Sie nicht davon ausgehen, dass ein richtiger Wert bedeutet, dass der Browser auf das Internet zugreifen kann.Sie könnten falsche positive Ergebnisse erhalten, wie in Fällen, in denen der Computer eine Virtualisierungssoftware ausführt das hat virtuelle Ethernet-Adapter, die immer "verbunden" sind. Wenn Sie den Online-Status des Browsers wirklich bestimmen möchten, sollten Sie zusätzliche Mittel für das Überprüfen entwickeln. Weitere Informationen finden Sie in dem HTML5 Rocks-Artikel Arbeiten mit dem Grid."

Sehen Sie diesen HTML5 Rock Artikel für eine echte stabile Lösung - mehr Arbeit natürlich:

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

+0

Die Frage war in Bezug auf PhoneGap, nicht mobile Chrome oder Safari. –

+0

Meine Antwort bezieht sich auf mobile Browser, da auf dem neuen Android das WebView Chrome ist und auf iOS das WebView immer Safari war. Auch in Android-Versionen vor Kitkat war das Webview in dieser Hinsicht dem Chrom nahe. – christianmenkens

Verwandte Themen