Dynamically generated application cache for offline mobile app

The other day I mentioned that I’m working on a web-based mobile app which has to work fully offline and occasionally sync back to the servers when the browser has a data connection.  We’ll be using iPads for this app, and while they will have 3G or LTE connections, I can’t count on having a signal at all locations, especially when the devices are in use at customer sites and warehouses.

The first step for me was to get the site itself working offline. For that purpose I’m using the HTML5 application cache, which is something I’ve never worked with. Thanking Ben Nadal for some pointers over at his website in this 5 year old blog entry. Note that I’m a little behind the times in my technology exploration here, but that’s fine, as long as it gets the job done.

So my first step was to create the cache manifest file.  The requirements here are that the words CACHE MANIFEST be the first words in the file, and that it be served with a mime type of text/cache-manifest.  That’s all doable from a cfm template, so in the root directory of my app I created the file cacheManifest.cfm.

 

The first line is:

Everything that follows is inside the CFIF block, because if the user doesn’t have a currently live session, we don’t want them caching anything.

Here’s the rest of the page:

The nice thing here is that the queries I’m calling are the exact ones I’ve already used for my webpages — they’re encapsulated in a cfc with the parameters I need, so I didn’t need to do any additional code here. I end up with a cache manifest which looks like this:

That complete, I included the following at the top of my index.cfm:

It wasn’t necessary to reference the cache manifest from any other pages. Based on this, I was able to login, wait for the site to cache, then disconnect my iPad from the internet. Performance is instantaneous for all page loads, because I have the entire site locally on the iPad.

Note that in the static pages Im loading, I include resources from other sites, including jQuery and Bootstrap libraries from the CDN. This worked flawlessly–the application cache had no problem downloading resources from multiple sites.

The next step will be to create an indicator for the drivers that the site is syncing (so they won’t walk out of the warehouse before it’s finished) and then set up the offline database.

Leave a Reply

Your email address will not be published. Required fields are marked *