I recently built a simple web-based CRM tool only to run into a problem: my users didn’t have internet access all the time, so couldn’t reach it when on the road. Primary use was going to be on phones and tablets, so I could have built a native app, but with both Android and iOS devices to support it would have meant learning two new coding environments or a framework which could publish to both.
Having played with some of the features in HTML5 I was aware it had the ability to work offline, storing data locally. So I did a bit of research and began knocking something together. I thought I’d outline some of the lessons I learned on the way.
Making a web page available offline
To make a file available offline, you need to create a cache manifest. Some of the older tutorials I found name it with a .manifest file type (e.g. offline.manifest, cache.manifest) but this didn’t work for me, you need to name it with a .appcache file extension (e.g. offline.appcache).
In there you need to reference all the files and resources you want available offline, and you can also set which files should never be cached as well as what to do if someone tries to access a page which is not available.
To make it easier, I created a completely separate file (offline.html) to do everything I wanted when there was no internet access, using Ajax, in one page.
I did add support to my .htaccess for a cache-manifest content type, but it worked fine before I had done that. Continue reading…