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  by Tommy Ku

This post is more than 2 years old, it may contain outdated information

(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


source: http://caniuse.com/

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">
  <head>
<!-- everything else -->

3 minutes

touch cache.manifest

Write up the manifest itself, inside cache.manifest:

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.

CACHE MANIFEST

CACHE:
/js/app.js
/js/angular/angular.min.js
/js/angular-resource/angular-resource.min.js
/js/angular-sanitize/angular-sanitize.min.js
/css/base.css
/css/animate.css

NETWORK:
*

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

References

  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...

This post first appeared on . Permalink:

About the author

Profile pic of Tommy Ku

Tommy Ku, a Hong Kong-based Software Engineer experienced developing PHP and Java-based web solutions and passionate in Web technology.

Also a hobbyist digital and film photographer.