Because my code does not work on mobile devices

Question

Because my code does not work on mobile devices

Navigation

#1 by (2 votes)

1

I made this html that is responsible for controlling some relays in my arduino. On the pc my mac opening it with google chrome works perfectly. But when I compile it with phonegap and run it on Android, the GET requests are not sent. I strike the switches and the relays do not fire. Does anyone know what this is?

I leave my code

<span class="switch">
	<span class="switch-border1">
		<span class="switch-border2">
			<input id="switch1" type="checkbox"/>
			<label for="switch1"></label>
			<span class="switch-top"></span>
			<span class="switch-shadow"></span>
			<span class="switch-handle"></span>
			<span class="switch-handle-left"></span>
			<span class="switch-handle-right"></span>
			<span class="switch-handle-top"></span>
			<span class="switch-handle-bottom"></span>
			<span class="switch-handle-base"></span>
			<span class="switch-led switch-led-green">
				<span class="switch-led-border">
					<span class="switch-led-light">
						<span class="switch-led-glow"></span>
					</span>
				</span>
			</span>
			<span class="switch-led switch-led-red">
				<span class="switch-led-border">
					<span class="switch-led-light">
						<span class="switch-led-glow"></span>
					</span>
				</span>
			</span>
		</span>
	</span>
</span>

<span class="switch">
	<span class="switch-border1">
		<span class="switch-border2">
			<input id="switch2" type="checkbox" />
			<label for="switch2"></label>
			<span class="switch-top"></span>
			<span class="switch-shadow"></span>
			<span class="switch-handle"></span>
			<span class="switch-handle-left"></span>
			<span class="switch-handle-right"></span>
			<span class="switch-handle-top"></span>
			<span class="switch-handle-bottom"></span>
			<span class="switch-handle-base"></span>
			<span class="switch-led switch-led-green">
				<span class="switch-led-border">
					<span class="switch-led-light">
						<span class="switch-led-glow"></span>
					</span>
				</span>
			</span>
			<span class="switch-led switch-led-red">
				<span class="switch-led-border">
					<span class="switch-led-light">
						<span class="switch-led-glow"></span>
					</span>
				</span>
			</span>
		</span>
	</span>
</span>

<script type="text/javascript">

var ip = '192.168.0.104';

function on(id) {
  if (window.XMLHttpRequest) {
   xmlhttp = new XMLHttpRequest();
  } else {
   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  var url = "http://"+ip+"/r"+id+"=ON";
  xmlhttp.open("GET", url, false);
  xmlhttp.send(null);
  var respo= xmlhttp.responseText;
 }

 function off(id) {
  if (window.XMLHttpRequest) {
   xmlhttp = new XMLHttpRequest();
  } else {
   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  var url = "http://"+ip+"/r"+id+"=OFF";
  xmlhttp.open("GET", url, false);
  xmlhttp.send(null);
  var respo= xmlhttp.responseText;
}

var checkbox = document.getElementById('switch1');

checkbox.addEventListener("change", comprueba, false);

function comprueba(){
  if(checkbox.checked){
      on(1);
  }else{
     off(1);
  }
}

var checkbox_2 = document.getElementById('switch2');

checkbox_2.addEventListener("change", comprueba2, false);

function comprueba2(){
  if(checkbox_2.checked){
      on(2);
  }else{
     off(2);
  }
}

android javascript html phonegap http

asked by Santiago D'Antuoni 31.12.2016 в 19:27

source

1 answer

How can I create links or direct access to a file on android? Animations CSS3 or JAVASCRIPT [closed]

score 2 · Answer 1

As I put you in the comments, this may be due to different reasons. With the information of the question I imagine that it is related to the first point below, but it may be that the second or third party also has to see something:

The IP you share in the code (192.168.0.104) is not correct. Or rather, it is correct, but it is part of a private network (range 192.168.0.0-192.168.255.255), that's why it will work without problems on your computer (connected to the private network) but it will surely fail on your mobile device.

You should check that the mobile device has access to that IP. And if you do not have it, instead of using a private IP, you should put the public IP or the URL of your server where you have hosted the service that controls the request.

You must specify a content security policy on the meta tags ( content security policy ), in which to specify which servers can communicate with your app (my translation):

Controls what network requests (images, XHRs, etc.) will be allowed to do (through the webview directly).

In Android and iOS, the white list of network requests can not filter all requests (e.g. <video> & WebSockets are not blocked). Therefore, in addition to the whitelist, you should use a meta tag with the Content Security Policy on all pages.

Then, depending on the version of Android and Cordova that you are using, you are going to need to have that Content Security Policy on your page (s) so that the GET request works correctly. In that link there are some examples, what you want would be something like this:

<!-- Permitir todo pero sólo desde el mismo origen o desde foo.com -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self' foo.com">

In previous versions of Cordova (4.x or smaller), instead of using security policies, you would have to specify the access-origin in config.xml and you could do something like this:

<access origin="*" />

but you should keep in mind that this would allow any type of communication with any server, which can be excessive (and not recommended), it would be better to specify the server / servers that would have access. Something like this:

<access origin="http://midominio.com" subdomains="true" />

to allow communications with mydomain and its subdomains.