What are the options for offline registration and forms?

Question

I have a project that caters for individuals with poor internet connections in predominantly rural areas. I need to allow for users to download(or any other applicable means), or fill out details offline and then when they are ready and the internet connection is ready the data filled out offline should sync with the online database and give a report.

The offline form also needs the same validation as online, to ensure no time wastage.

What are the options I know that HTML 5 has an offline application ability. I would prefer an open source option, which will allow people with intermittent internet issues to continue filling out a form or series of forms even though internet has dropped, and the data sync when internet reconnects.

So what are the best options? Having the user requiring to download a large application is also not the best case, I would prefer a browser or small download solution. Maybe even a way of downloading a validatable form in some format for re-upload.

Answer 1

This is something I've been muddling through myself as some of the users of the site I am currently tasked with building have poor connections or would like to fill in forms away from a network for various reasons. Depending on your precise needs and your customer's browser compatibility, the solution I've decided to go with is to use the HTML5 cache capability you mention in your post.

The amount of data stored is not that great, and it will mean that the webpage you want them to fill in is available offline.

If you couple this with the localStorage interface you can keep all form submissions until they regain connection.

As an example of my current solution:

The cache.php file, to write the manifest

<?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");

You can then have a simple ajax script checking for connection

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

Then for your form submission script, use localstorage if that noCon variable is set to 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
     }
 });

I've not tested every script on this page, but they're written based on the skeleton of what my current solution is doing, minus a lot of error checking etc, so hopefully it will give you some ideas on how to approach this

Suggestions for improvements are welcomed