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

css, google-chrome, http-caching

Solution

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.

Problem

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: 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. The `Transfer-Encoding: chunked` is causing any problems in caching on chrome? It works fine in FireFox though. gzip compression doesn't works well with Chrome: https://github.com/expressjs/compression/issues/64 Any pointers/suggestions?

Original source