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

Sumit Jolly
8y
3.7k
0
1

Article

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:

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:

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

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.

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>

Configure manifest file at Web Server

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.

The files mentioned in cache.manifest file are available in Application cache.

Use Application Cache

Steps to use / test offline browsing capability,