iKnowNow: Using HTML5’s Offline Capabilities

01.16.2012

One of my more exciting duties at DOOR3 is R&D, aka “Will! We heard about this magic; Is it true?!” My boss then gives me the description of a new technology and I create a ‘Proof of Concept’ (POC) that it works or a report explaining that it doesn’t.

Just this last Friday, I was briefed on HTML5’s offline features referred to sometimes as ‘Application Caching’. The trend on the web as of late is to call things ‘Applications’ probably because of the proliferation of ‘native’ OS apps these days but also because now the web actually does things rather than just shows things, ie Web 2.0.

For example, let’s say a client wants to make an app for their company but doesn’t want to develop ‘native’ OS applications. Therefore, they want web applications because they can be run on any web-capable device. However the client would also like for the apps to work offline. Enter the new web development standard -HTML5- and its fantastic new application-caching abilities.

The HTML5 caching works as follows: in the first couple lines of your .html file you define a “cache manifest” file. This cache manifest file is simply a list of other files you do and do not want cached for offline usage.

Example (in the .html file):

`<!DOCTYPE html>

` The SECOND line of this file defines the manifest as test.manifest. Soooooo you'd better make that file. Example (in the .manifest file): `CACHE MANIFEST CACHE: index.html index2.html Puppy-Video.mp4 Rockport-Shoe.PNG Rockport-Shoe-2.PNG` **What's in this?** Start the file with the line CACHE MANIFEST. That's important. Serial. The line that just says "CACHE:" is a section header telling you that all things in this section are to be cached. However in a manifest as simple as this one, you could eliminate that line and it would be implied and still work. List the files necessary for offline viewing. In this case it's another .html file, a video and a couple pictures. Remember that this is just a POC; It don't need to be pretty until it's client-facing. **Optional:** You can put the files you want to AVOID caching in a section entitled "NETWORK:" You can also put the page you want to cache INSTEAD of the main page in a section headed "FALLBACK:" **IMPORTANT!!!!** 1. This is a new content type. Your Apache server is probably not set up to accept it. You will probably have to add the following line anywhere in your .htaccess file: `AddType text/cache-manifest .manifest 2. The server isn't set to refresh the cache manifest for hours or if it's changed. If you change a file that's cached, you'd better change your manifest file to trigger a refresh. Otherwise you could be stuck looking at the old version and tearing out your earlobe hair in the meantime. This is a very cursory run-down of the basics I needed to do my POC. For more information, consult your local library or visit: [http://diveintohtml5.info/offline.html](http://diveintohtml5.info/offline.html)