Chrome not caching css file. The caching works for .js/.png files.

Question

I am observing that CSS file is not getting cached on Chrome browser. My application is built by Angular-CLI and all the required cache-control headers and Expires header set to 5 minutes:

Accept-Ranges:bytes
Cache-Control:max-age=600
Content-Encoding:gzip
Content-Type:text/css
Date:Wed, 13 Sep 2017 05:11:17 GMT
ETag:W/"441246-1505278984000"
Expires:Wed, 13 Sep 2017 05:21:18 GMT
Last-Modified:Wed, 13 Sep 2017 05:03:04 GMT
Server:Apache-Coyote/1.1
Transfer-Encoding:chunked
Vary:Accept-Encoding

JS files which are set with same response headers are cached as expected. css file is cached in Firefox Mozilla as well. I searched through the posts and few posts suggestions were:

1. Resources presenting self-signed certificates and working with HTTPS are not cached by Chrome sometimes if there is any SSL error. But in my case, all other files like .js, .png files are operated on same channel and are cached.

2. The Transfer-Encoding: chunked is causing any problems in caching on chrome? It works fine in FireFox though.

3. gzip compression doesn't works well with Chrome: https://github.com/expressjs/compression/issues/64

Any pointers/suggestions?

Answer 1

It seems that Chrome do not caches the resource file if it has Transfer-Encoding:chunked response header. This response header was getting set even if the resource file was of small size. I think the header is set automatically depending upon the http server configuration. This configuration could be based on size of the file, etc.

Since I do not have control over the server configurations to set any HTTP protocol setting, I ended up setting the response header: Transfer-Encoding: identity. With this response header, http server do not modifies the header further and puts on the Content-Length header as well. With Content-Length header in response, gives Chrome a clear picture that the resource file can be cached.