Getting started with HTML5 offline cache
Hello everyone!
This is one where I was afraid for: offline cache. A fear which really isn’t needed at all, as it is really a piece of cake to get started with offline caching in HTML5.
I’m now using it on two of my websites, this one included, and it takes only minutes to get started (although I’m not completely sure if I did it right, I think I did 
Getting started!
First of all, you’ll need to make sure that you are actually working in an HTML document, so don’t forget the HTML5 doctype! (believe it or not, that’s a common thing people forget). It’s very easy, but I’ll type it here anyway:
<!DOCTYPE html>
After that code, we’ll need to create a new file, called offlinecache.manifest. That file will tell the browser which files it’s allowed to cache. You can also tell what it shouldn’t cache – you’ve got complete control.
So, open up your favorite text editor and create a new file. In that file, you’ll need to paste something like this.
CACHEMANIFEST # version: 1 # List CACHEable files CACHE: images/background.jpg images/adblocker.png images/alert-overlay.png images/canvas-bg.jpg # List here what shouldn't be cached. Use * to allow only caching what is listed above NETWORK: *
This file is pretty straight-forward, but I’ll explain this anyway. You can change the version without any problem, that’s just a comment – but don’t change the CACHEMANIFEST. Under the CACHE you’ll need to specify what is allowed to be cached. You aren’t limited to images, you can also add HTML files and more.
Under NETWORK, you can specify what shouldn’t get cached. Now, that can be a lot of work to specify that, so just add a * to avoid having to specify everything. If you use *, it’ll avoid caching anything you haven’t said that could be cached.
When you’re done in this file, save it as offlinecache.manifest
If you’re actively developing your site, it’s handy to avoid caching your style.css or template files!
Now, we still need to upload this file to our website, so do that. I prefer to have this file in my site root. You can place it in a folder if you like to, just remember where you place it.
Now, we’ll still need to edit 2 files to get this to work. Open your html file (or any file where you specify the doctype) and add, after the
<!DOCTYPE html>
(remember, it has to be HTML5!), this chunk of code:
<html manifest="http://www.yoursite.org/offlinecache.manifest">
This will tell where your offlinecache file is and let know the browser that you want to cache these files. Edit the site location to where your file is, save it and you’re done here. Who told you it would be hard?
Now, the last step is to edit our .htaccess file (if you don’t have one – make one).
Making a htaccess file can be quite tricky on windows, so just call it site.htaccess or something and rename it on your server.
Now, paste (if you already have stuff in your htaccess just add it at the bottom of the file):
AddType text/cache-manifest manifest
And that’s all! Just save and upload this file (and don’t forget to rename it to .htaccess). Now you should get a toolbar in Firefox asking you if you want to allow caching of files. Congratulations!
If for any reason that doesn’t happen just leave a comment and I’ll try to help you out!
Kevin