Voice of a Developer: Application Cache API - Part Twenty Six


JavaScript is language of Web. This series of articles will talk about my observations learned during my decade of software development experience with JavaScript
Before moving further let us look at the previous articles of the JavaScript series:
In the last article, we learned about Storage API available in the browser. Now, we will understand cache strategies and offline cache capability of the application. Let me start with an explanation of the short anecdote “First view”.

First view

First view means when you launch a new application and users will be hitting it for the first time. This testing shall ideally be done by clearing your browser cookies and cache to test how ‘first-time’ user will have an experience of the site.


Cache exists in your processor in the form of L1, L2 cache for faster processing. Here we are referring to browser caching. I have created an application in IIS server.
For now, let us focus on few files test.html, img.png and script.js. This site is setup at http://localhost:8079/test.html [however you can configure any other port]
When I access site the first time, it’s the first view and rendered as:
first view
Next time when I refresh I get below view because it’s rendered from browser’s cache.
Brow cash
Browser caches static content like CSS, HTML, images so the webpage loads faster for the repeated visitors. A browser usually reserves certain amount of disk space, like 12MB for caching. There are many ways for cache control in modern browsers.

HTTP cache headers

There are two primary cache headers, Cache-Control and Expires.
Cache-Control: you can specify public OR private.
  • Public: Can be cached by any proxies in between
  • Private: Can be cached only by the end-client and not by proxies in between
You can also mention expiry date along with using max-age in seconds, ex-
Cache-Control:public, max-age=31536000 //31536000 = 1 year
The expiry date tells the browser when to retrieve this resource from the server. It is also called as conditional requests. The process is well explained by below diagram:
Here is a sample application you can test at Heroku and review request & response headers
URL: http://http-caching-demo.herokuapp.com/?cache=true
review request
URL: http://http-caching-demo.herokuapp.com/?etag=true

Offline capability

As the web became advanced the need for applications to work in offline mode arose. Offline? Yes, it is possible via the Application Cache interface. It gives a lot of advantages, these are:
  • Offline browsing
  • Server load gets reduced
  • Speed improves because network payload is avoided
  • User can navigate around incase server/site goes down

Cache manifest file

Revisit our code files I created for caching example. You can see the cache.manifest file. It is an instruction to browser to cache resources mentioned in the fiile to work offline.

Structure of manifest file

This has three sections:
  • CACHE MANIFEST- Files which will be cached after they are downloaded from the web server, ex- jpg, png, html 
  • NETWORK- Which will not be cached, ex- aspx, asp, PHP files
  • FALLBACK- If a particular file/page is inaccessible then leverage file mentioned under this section. It is fallback option.
cache.manifest file: I am caching three static files here:

Refer manifest file

You have to refer cache.manifest file in HTML tag, ex, in test.html. 
  1. <!DOCTYPE html>  
  2. <html manifest="cache.manifest">  
  4. <head>  
  5.     <meta http-equiv="content-type" content="text/html; charset=UTF-16">  
  6.     <meta name="robots" content="noindex, nofollow">  
  7.     <meta name="googlebot" content="noindex, nofollow">  
  8.     <title>JS</title>  
  9. </head>  
  11. <body style="background-color:white ">  
  12.     <script src="script.js"></script>  
  13.     <imgsrc="img.png">  
  14.         <script>  
  15.         </script>  
  16. </body>  
  18. </html>  

Configure manifest file at Web Server

The server has to send the manifest file to the client so this extension shall be registered at the server. In IIS add below MIME type:
IIS add

Run website

Now you run your website and review messages generated at Console window
You could see the cache.manifest sent by the server and it is giving instruction to browser to cache three files. The same could be reflected by monitoring at Resources tab.
Resources tab
The files mentioned in cache. manifest file are available in Application cache.

Use Application Cache

Steps to use / test offline browsing capability,
  • Go to IIS and Stop the website
  • Run the site again and it’ll work fine


It is a big leap that offline browsing is available now but we need to use this carefully. Please share your comments / feedback.