jQuery:离线后 POST 错误(iOS 和 Chrome)

Question

我构建了一个具有离线功能的 HTML5 网络应用程序(使用 AppCache)。程序流程为:

• 在线:在网络上，应用会预加载一些基本信息(“工作”)。
• 离线:用户将装有应用程序的平板电脑离线，然后在应用程序上执行他们的工作流程(例如检查和分级)。
• 在线:平板电脑重新连接到网络后，会将用户的输入同步(或上传)到中央系统/数据库。

我们已做出业务决定，将 Chrome 用于所有离线/HTML5 应用程序(因为支持 HTML5)。在 Windows 设备(使用 Chrome)上，同步/上传没有问题。如果用户使用的是 iPad(iOS 7、Chrome)，他们第一次尝试同步时，会抛出一个错误——但实际上是同步了第一条记录。 XHResponse 对象抛出的错误只是“错误”。

我们在服务器端使用 WebAPI 2.2，在客户端使用 jQuery 2.1.1 AJAX。

执行 POST 的客户端 JavaScript 如下:

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);
}

这似乎只发生在运行 Chrome 的 iOS 设备上。 Windows 设备没有此问题。有什么方法可以追踪或诊断正在发生的事情吗？甚至如何防止错误发生？

Answer 1

我曾经遇到过一个非常相似的问题，我以一种非常粗暴的方式解决了这个问题:

在进行同步之前，我从网络加载了一个可见的 1x1 透明 png(使用随机查询字符串设置源以避免缓存)。然后当该图像加载(onload 事件)时，我启动了 JavaScript 调用。

直到今天，我都不知道是否存在一些潜在的网络问题，或者这是否只是通过在启动时引入时间延迟来解决它，但问题从未再次出现，也没有在野外出现过。想一想，可能是时候重构该代码了……