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 browser. Now, we will understand cache strategies and offline cache capability of application. Let me start with explanation of 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
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]
![Cache]()
When I access site first time, it’s 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 repeated visitor. 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
Expiry date tells browser when to retrieve this resource from the server. It is also called as conditional requests. The process is well explained by below diagram:
![requests]()
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
![Connection]()
Offline capability
As the web became advanced the need for applications to work in offline mode arose. Offline? Yes, it is possible via 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 cache.manifest file. It is an instruction to browser to cache resources mentioned in the fiile to work offline.
![img]()
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 – Fhich 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:
CACHE MANIFEST
/img.png
/test.html
/script.js
Refer manifest file
You have to refer cache.manifest file in HTML tag, ex, in test.html.
- <!DOCTYPE html>
- <html manifest="cache.manifest">
-
- <head>
- <meta http-equiv="content-type" content="text/html; charset=UTF-16">
- <meta name="robots" content="noindex, nofollow">
- <meta name="googlebot" content="noindex, nofollow">
- <title>JS</title>
- </head>
-
- <body style="background-color:white ">
- <script src="script.js"></script>
- <imgsrc="img.png">
- <script>
- </script>
- </body>
-
- </html>
The server has to send manifest file to client so this extension shall be registered at 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 cache.manifest sent by 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
Summary
It is a big leap that offline browsing is available now but we need to use this carefully. Please share your comments / feedback.