离线注册和表格有哪些选择？

Question

我有一个专为农村地区互联网连接较差的人设计的项目。 我需要允许用户下载（或任何其他适用的方式），或离线填写详细信息，然后在他们准备好并可以连接Internet时，离线填写的数据应与在线数据库同步并提供报告。

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

我知道HTML 5具有脱机应用程序功能的选项有哪些。 我希望有一个开放源代码选项，即使Internet中断，Internet间歇性问题的人也可以继续填写一个表格或一系列表格，并在重新连接互联网时同步数据。

那么最好的选择是什么？ 让用户要求下载大型应用程序也不是最好的情况，我希望使用浏览器或小型下载解决方案。 甚至可以下载某种格式的可验证表格以重新上传。

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 ，则使用localstorage

$(/*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
     }
 });

我没有测试此页面上的每个脚本，但是它们是根据我当前解决方案的工作框架编写的，减去了很多错误检查等，因此希望它会为您提供一些解决方法

欢迎提出改进建议