Written by

You already know caching is a powerful mechanism for improving website performance, but did you know there’s a way to cache your files a second time?

Welcome to Application Cache! This is a way for you to download webpage-critical files for offline use.

Using Application Cache is actually quite easy. Just create a new file named cache.manifest in your root directory, and use this code:

CACHE MANIFEST

#version 1.0 12-1-2017

CACHE:

#images
/assets/images/logo.svg

#internal HTML documents
/

#style sheets
/assets/styles/global.min.css

#style sheet images
/assets/images/sprite.png

#javascript files
/assets/scripts/global.min.js

NETWORK:
*

When you’re done, add manifest="/cache.manifest" directly to the <html> tag of your webpage.

ProTip: You can use multiple cache.manifest files throughout your website. Just change the file name prefix from “cache” to something of your choosing.

This very blog uses Application Cache a number of times throughout. My offline code editor is another example.

The Joys

Application Cache is awesome because unlike normally-cached files, any file saved to Application Cache doesn’t even speak to the server for a HTTP request.

Even when you have an active internet connection!

This means your website will be craaaazy fast! 😜

The Pitfalls

Unfortunately, Application Cache becomes problematic when developers need to push updates. Because the requested files never speak to the server, how can they know if there are updates?

The only way to do this is to change the contents or the file name of cache.manifest file itself, literally forcing the browser to download the changes.

ProTip: Remember this is an additional cache and will need to be maintained separately from your HTTP headers.

Not every business needs a cutting edge experience, but when you want exceptional quality front-end web development work, remember me. Send me an email and we can talk about the details.