离线注册和表单的选项是什么？

Question

我有一个项目，为主要是农村地区互联网连接差的个人服务。我需要允许用户下载(或任何其他适用的方式)，或脱机填写详细信息，然后当他们准备就绪和互联网连接就绪时，脱机填写的数据应该与在线数据库同步并给出报告。

离线表单还需要与联机相同的验证，以确保不浪费时间。

我知道HTML 5具有脱机应用程序能力的选项有哪些。我更喜欢开源选项，它将允许有间歇性互联网问题的人继续填写表单或表单系列，即使互联网已经下降，并且在互联网重新连接时数据同步。

那么最好的选择是什么呢？如果用户需要下载大型应用程序也不是最好的情况，我更喜欢浏览器或小型下载解决方案。甚至可能是以某种格式下载可验证表单的方式，以便重新上传。

Answer 1

这是我自己一直在搞混的东西，因为我目前负责建设的网站的一些用户有着很差的连接，或者出于各种原因想要在网络之外填写表格。根据您的确切需求和客户的浏览器兼容性，我决定使用您在文章中提到的HTML5缓存功能。

存储的数据量不是很大，这意味着您希望它们填写的网页可以脱机使用。

如果将此与localStorage接口相结合，则可以保留所有表单提交，直到它们恢复连接为止。

作为我当前解决方案的一个例子：

cache.php文件，以编写清单

<?php

header("Content-Type: text/cache-manifest");

echo "CACHE MANIFEST\n";

$pages = array(
    //an array of the pages you want cached for later
);

foreach($pages as $page) {
    echo $page."\n";
}

$time = new datetime("now");
//this makes sure that the cache is different when the browser checks it
//otherwise the cache will not be rebuilt even if you change a cached page
echo "#Last Build Time: ".$time->format("d m Y H:i:s T");

然后，您可以使用一个简单的ajax脚本检查连接。

setInterval( function() {
$.ajax({
    url: 'testconnection.php',
    type: 'post',
    data: { 'test' : 'true' },
    error: function(XHR, textStatus, errorThrown) {
         if(textStatus === 'timeout') {
              //update a global var saying connection is down
              noCon = true;
         }
    }
});
if(hasUnsavedData) {
    //using the key/value pairs in localstorage, put together a data object and ajax it into the database
    //once complete, return unsavedData to false to prevent refiring this until we have new data
    //also using localStorage.removeItem(key) to clear out all localstorage info
}
}, 20000 /*medium gap between calls, do whatever works best for you here*/);

然后，对于表单提交脚本，如果将noCon变量设置为true，则使用本地存储。

$(/*submit button*/).on("click", function(event) {
     event.preventDefault();
     if(noCon) {
         //go through all inputs in some way and put to localstorage, your method is up to you
         $("input").each( function() {
              var key = $(this).attr("name"), val = $(this).val();
              localStorage[key] = val;
         });
         hasUnsavedData = true;
         //update a global variable to let the script above know to save information 
     } else {
     //or if there's connection
         $("form").submit();
         //submit the form in some manner
     }
 });

我还没有测试过这个页面上的每个脚本，但是它们是基于我当前解决方案的框架编写的，没有很多错误检查等等，所以希望它能给您一些关于如何处理这个问题的想法。

欢迎提出改进建议。