Post
Ask Question

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

Introduction

 
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

 
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 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:
 
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 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.
 
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- 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:
 
 
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. 
  1. <!DOCTYPE html>  
  2. <html manifest="cache.manifest">  
  3.   
  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>  
  10.   
  11. <body style="background-color:white ">  
  12.     <script src="script.js"></script>  
  13.     <imgsrc="img.png">  
  14.         <script>  
  15.         </script>  
  16. </body>  
  17.   
  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

Summary

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


Similar Articles