Offline availability of your web application will give a little extra comfort to your users. If using Local storage an appropriate choice to enable web applications to work offline with dynamic data (see my post on Local storage), Application cache (hereafter AppCache) is a good choice for making the static content of the web application available offline.
AppCache enables developers to specify a set of files which need to be cached by the browser. While cached, the requested resources will be served from the disk and this will make your web application available even when users are offline.
Caching static content has several benefits which you may like to leverage, including:
- Better site performance, as static content will be served from the disk and not requested from the server
- Better server performance, as less resources will be served and bandwidth will be preserved
- Users will have the possibility to access your contents while offline, leading to better user experience and satisfaction
- Mobile users can use the web app even when they are out of internet coverage
- Mobile user can bookmark/pin the web application to their phone and use it later as a mobile app (offline)
The cache size limit may vary between browsers, but a cache size of 5MB can be expected from modern browsers, and with users permission, the size can be increased if needed.
How do we tell the browser to cache our site, and most importantly, which files to cache. We can do this using a special file called Manifest file. We tie manifest file to the html root element using manifest attribute. e.g.
It is recommended that the extension of the file is .appcache.
Manifest file structure
Manifest file is a simple text file which should be served with “text/cache-manifest”content type. The very first line of the file should be:
and after that files to be cached are listed one per line.
index.html css/main.css css/theme.css js/lib.js
Folders and wildcard specifiers are also permitted.
The common practice is to follow this structure:
CACHE MANIFEST #23.10.2014 v1.0.10 /file1.html /file2.jpg
On the first line we have put the mandatory declaration of “CACHE MANIFEST”. Then on the second line we put date and version as comment. After version, we start declaring files/folders which are to be cached. The “NETWORK” section shows which files should not be cached as they change frequently, and last, with “FALLBACK” we specify what should be used when a resource is unreachable.
The comment part with version number has a significant importance here. The browser will not ask for the cached files unless one of these two is true:
- The cache is deleted
- The manifest file has changed
We best note the change of the manifest file by putting a version number in it. Whenever we do a change in any of the cached files, we simply increment the version number to advise the browsers to re-cache the files.
Specifying the manifest file will make the browsers cache the content specified and make the static content of your web app available offline.