JQuery: POST error after battery life (iOS and Chrome)

Question

I created a standalone HTML5 web application (using AppCache). Program stream:

• Online On the network, the application preloads some basic information (“works”).
• Offline : the user transfers the tablet with the application offline, and then performs his workflow in the application (for example, checks and sorting).
• Online After the tablet connects to the network, it synchronizes (or downloads) the user's login to the central system / database.

We made a business decision to use Chrome apps for ALL offline / HTML 5 apps (due to HTML5 support). On a Windows device (using Chrome), syncing / downloading works without problems. If the user uses the iPad (iOS 7, Chrome), the first time they try to synchronize, an error occurs - however, the first IS record itself is actually synchronized. The error caused by the XHResponse object is simply an “error”.

We use WebAPI 2.2 on the server side and jQuery 2.1.1 AJAX on the client side.

The client side of JavaScript that does POST is as follows:

try { var inspections = GetCompleteInspections(); if (inspections) { for (var i = 0; i < inspections.length; i++) { var response = null; var data = JSON.stringify(inspections[i]); $.ajax({ async: false, type: "POST", url: "api/", data: data, contentType: "application/json; charset=utf-8", dataType: "json", success: function (dta, textStatus, xhr) { window.console.log("data:" + dta + "--"); if (d && d < 0) { alert("dta is invalid:" + dta + "--"); response = "Error Uploading, please try again"; } else { $("#inspection_" + i).hide(); } }, error: function (xhr, textStatus, errorThrown) { if (textStatus == "timeout") { alert("timeout!"); response = "timeout"; } else { window.console.log(xhr.responseText); var errorMessage = errorThrown || xhr.statusText; response = errorMessage; } } }); if (response) { throw response; } } } $('#new_records').append("<tr><td>Sync Complete</td></tr>"); $('#syncButton').hide(); ClearInspections(); $("#dialog-sync").dialog("close"); } catch (err) { $("#dialog-sync").dialog("close"); window.alert("An error occurred during upload\n" + err); } 

This only happens on iOS devices running Chrome. On Windows devices, this is not a problem. Is there a way to track or diagnose what is happening? Or even how to prevent a mistake?

Answer 1

I had a very similar problem when I hacked into a really rude way:

Before synchronizing, I downloaded the visible transparent PNG 1x1 from the network (set the source with a random query string to avoid caching). Then, when this image was loaded (onload event), I started JavaScript calls.

Until now, I don’t know if there is any underlying problem on the network, or if it only solved this by introducing a time delay at startup, but the problem never recurred and never occurred in the wild. Think about it, it's probably time to reorganize this code ...