Profile pic of Tommy KuTommy Ku's Blog

Reading and thinking

Adding HTML5 application cache to speed up your web app in 5 minutes

Posted on March 16, 2015

(2017-07-17) AppCache has been deprecated, see how to cache web pages using ServiceWorker in this post.

OK, let’s do this in 5 minutes to get you started with HTML5 app cache.

10 seconds


Save yourself the trouble if you have to support IE6.

30 seconds

Make a branch so we can do whatever we want.

git checkout -b 'html5-app-cache'

1 minute

Your server has to serve the manifest file in text/cache-manifest MIME type. Look it up how to setup this if you are not using Apache.

nano .htaccess
# add the following line for serving offline cache manifest
AddType text/cache-manifest .manifest

2 minutes

Specific the path to manifest file in your web app.

<!DOCTYPE html>
<html manifest="/cache.manifest">
<!-- everything else -->

3 minutes

touch cache.manifest

Write up the manifest itself, inside cache.manifest:


Now fire up your app and it will not work. Be patient, we still have 2 minutes.

Tab F12 to enter Chrome DevTools

Img: A quick way to know what we wanna cache

4 minutes

Copy and paste the paths to whatever files we are supposed to cache from DevTools console warnings.




Everything listed under CACHE will be cached, other stuff like Google fonts are loaded as usual.

5 minutes

Now we are done. It is always a good idea to cache your web app to optimize page load time. In particular, when your web app is an utility app intended to be usable offline. There are more to do with cache.manifest such as version-based caches, hooks to manifest loading… The references below explain better how those features work. So far, I only need to cache my Javascript and CSS files.

Why 5 minutes? That’s because I had to wait for this.

source: Flickr


  1. Using the application cache - HTML (HyperText Markup Language) | MDN
  2. A Beginner’s Guide to Using the Application Cache - HTML5 Rocks

You could also look at...