Thanks to HTML5 application cache, a feature that let us store resources on the client side, we can develop sites that continue to display offline when there is no network connection. HTML5 let us tell the browser which resources of the site to store in the cache so the next time you enter the site those resources will be loaded from your own device instead of the remote server hosting the site. This is very useful as a way to improve loading times and opening pages offline.

Personally I found this useful for an iPhone web app I made called MyTinyCloud. I tried this only on Safari (Desktop and Mobile) because it support this feature.

1.- Making the Cache Manifest

First you have to create a Cache Manifest file, this is a file which has references to all the resources you want to save in the cache. The Cache Manifest file is a simple text file that holds the file names and paths of the resources. The paths are relevant to the directory you saved the manifest file in. You can use a simple text editor and you have to save the file as “cache.manifest”, you can use whatever word instead of cache, for example main.manifest, demo.manifest, example.manifest, the important thing is to use the “.manifest” extension. Here’s an example of a Cache Manifest file:

CACHE MANIFEST
index.html
media.html
friends.html
about.html
error.html
images/back.jpg
images/tributton.png
images/navbutton.png
css/style.css
javascript/functions.js

Very important: this file must be served with mime content type text/cache-manifest, be sure to modify this. There’s a chance that when you upload the file to the server it will be served as text/plain. Sometimes you can modify mime types directly from the control panel of your hosting service but other times you can’t so you’ll have to add a content type using the .htaccess file, you just need to append this line:

AddType text/cache-manifest .manifest

That should work, if not you´ll need to contact your hosting provider for support.

Another important thing: once you uploaded the Cache Manifest file be sure that the name is correct. When I uploaded mine the name changed to cache.manifest.html so I had to delete the “.html” extension.

2.- Declaring the Cache Manifest:

Now you´ll have to declare the Cache Manifest file in your HTML file. You do this by adding a manifest attribute to the <html> tag:

<html manifest="cache.manifest">

Use the name you used for your “.manifest” file, cache.manifest, main.manifest, demo.manifest, example.manifest or whatever you used.

This is it. Now the next time you enter the site the browser will download all the resources you included in the Cache Manifest file and then every time you enter the site those resources will load directly from your cache. The application cache updates automatically every time you change the Cache Manifest file to add or remove resources.