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?

Gap

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.

Gap

Answer 2

I am having the same issue on one web site, but deploying the same web app to another web site (on the same IIS) server, I get everything cached. Recycling the application pool did not help.

Only after stopping and starting IIS, both web sites now cache CSS and JS files in Chrome. Beats me, but you could give it a try.

Dorian

Yes, you may be correct. It has to do with the configuration at the HTTP Server. In my case, I do not had the liberty/access to server configuration so I set response header 'Transfer-Encoding:identity' for the JS file. – Gap

Answer 3

Not sure if this is your case but, I had the same problem and the problem disappeared when I started to use the proper SSL certificate for the domain.

Cancroid