Setup:
I used nginx server. I experimented with two different sets of header configuration.
1. Expires header only.
2. Expires and Last Modified header
I had the done the following in all the browsers,
Clear the cache.Access the page (or Hard reload). Now , all the resources are freshly downloaded. The page downloads only one JS file.
Do a soft reload. (Cmd + R)
When the soft reload is done,
Case 1:Expires header only
1.Chrome (v55) serves from disk/memory cache with Status 200.It does not fetch resource from the server.
2.Firefox (v51) sends a request and downloads the resource each time with Status 200. When the resource has only one expires header, firefox and other browsers always downloads the resource.
Case 2: Expires and Last Modified header
1.Chrome again serves from disk/memory cache with Status 200. It does not fetch resource from the server.
2.Firefox and Other browsers always sends a 'If-modified-since' header to the server, depending on the header, the server sends either 200 and the resource or 304 Not modified.
The problem with other browsers approach is that , they always send a request for a resource to check it's freshness. Let's say there are 40 static resources, each time i hit a reload the browser will send a request. This causes increase usage of bandwidth, number of requests to the server.
Which approach is good?
P.S. In chrome ,when u have only 'Last Modified header', it sends a request for 304 Not Modified. But with expires and Last modified, it always serves from cache.