Question

我有一个项目，适合主要是农村地区互联网连接较差的个人。我需要允许用户下载（或任何其他适用的方法），或离线填写详细信息，然后当它们准备好并且互联网连接准备就绪时，离线填写的数据应与在线数据库同步并提供报告。 / p>

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

我知道有哪些选项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

，请使用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
     }
 });

我没有测试过这个页面上的每个脚本，但是它们是基于我当前解决方案正在做的骨架编写的，减去了大量的错误检查等等，所以希望它会给你一些关于如何接近这个

欢迎提出改进建议

离线注册和表单有哪些选项？

1 个答案: