Welcome to the website of Davis Fiore

HTML - How does caching work on the web?

Fri, 04/12/2013 - 20:54 |

admin

There are different ways in which a response can be cached:

It can be cached on the web server for a certain time, before being requested again from the application server.
It can be cached on a proxy.
It can be cached in the browser.

There are different ways to tell a browser to cache contents:

You can configure your browser
You can use meta tags.
You can use http header response directives.

There are three different meta tags:

Cache control:
```
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
```
This is only recognized by HTTP/1.1 servers.
Pragma no-cache:
```
<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
```
This is compatible with HTTP/1.0. If you don't know what your server support, use both "pragma no-cache" and "cache control".
Expires:
```
<META HTTP-EQUIV="EXPIRES" CONTENT="Tue, 18 Feb 2014 10:10:00 GMT">
```
The page expires depending on the date, instead of the max age.

We can in alternative set the same information in the HTTP header. This is a better choice, because it can have effect not only on a browser but on proxies too.

For example:

Cache-Control: public

At the beginning, the idea was to convert meta tags on HTTP declaration server-side. But this is not the case and HTML5 doesn't even support cache meta tags.

HTML5 introduces the concept of application cache, where not only the content is cached and a web application can run offline . To enable this type of caching, it's needed a specific manifest and the html should include this tag:

<html manifest="demo.appcache">

The manifest tells what and how to cache the content.

In all the cases where the browser is required to cache content, it will try to reach the server to check if an updated content is available. If not it will receive the HTTP response 304 and load the content from the cache.

Here is an example of browser caching with response 304.

HTML used in this example:

<HTML>
	<HEAD>
		<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="private">
	</HEAD>
	<BODY>
		Cache testing
	</BODY>
</HTML>

Client request:

	GET /example/index.html HTTP/1.1
	Host: localhost:8080
	User-Agent: Mozilla/5.0 (Windows NT 5.1; rv:19.0) Gecko/20100101 Firefox/19.0
	Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
	Accept-Language: en-US,en;q=0.5
	Accept-Encoding: gzip, deflate
	Connection: keep-alive

The first time, the server returns the page:

	HTTP/1.1 200 OK
	Server: Apache-Coyote/1.1
	Accept-Ranges: bytes
	Etag: W/"107-1365789257078"
	Last-Modified: Fri, 12 Apr 2013 17:54:17 GMT
	Content-Type: text/html
	Content-Length: 107
	Date: Fri, 12 Apr 2013 18:01:26 GMT

As you can see a date directive has been added.

Second request from the client:

	GET /example/index.html HTTP/1.1
	Host: localhost:8080
	User-Agent: Mozilla/5.0 (Windows NT 5.1; rv:19.0) Gecko/20100101 Firefox/19.0
	Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
	Accept-Language: en-US,en;q=0.5
	Accept-Encoding: gzip, deflate
	Connection: keep-alive
	If-Modified-Since: Fri, 12 Apr 2013 17:54:17 GMT
	If-None-Match: W/"107-1365789257078"

The server respond that there isn't any updated content:

	HTTP/1.1 304 Not Modified
	Server: Apache-Coyote/1.1
	Etag: W/"107-1365789257078"
	Date: Fri, 12 Apr 2013 18:02:15 GMT

The client then read the cache.

Note that at the second request, the user can force the update by pressing CTRL+F5. In this case the content is retrieved from the server, because the browser add the following HTTP directives:

	Pragma: no-cache
	Cache-Control: no-cache

If you want your page not to be cached, your server should return it with three directives:

	Cache-Control: no-cache, no-store, must-revalidate
	Pragma: no-cache
	Expires: 0

You can do that in Java using a filter, or in the servlet itself:

	// Https directive for Http 1.1
	response.setHeader("Cache-Control", "no-cache, no-store, must-revalidate");

	// Https directive for Http 1.0
	response.setHeader("Pragma", "no-cache");

	// Https directive to avoid proxy caching
	response.setDateHeader("Expires", 0);