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:
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.
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! 😜
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.