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] When I access site the first time, it’s the first view and rendered as: Next time when I refresh I get below view because it’s rendered from browser’s cache. 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.

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 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:

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 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.

Summary

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