Chrome refuses to cache Javascript

I had the same issue with chrome and after some hours of trial and error I figuered out, that chrome seems to have a problem with the Vary Header

I've got this snippet in my Apache / .htaccess config and as soon as I comment the line "Header append Vary Accept-Encoding" Chrome starts caching .js and .css files

  <FilesMatch "(\.js\.gz|\.css\.gz)$">  # Serve correct encoding type.  Header set Content-Encoding gzip  # Force proxies to cache gzipped & non-gzipped css/js files separately.  #Header append Vary Accept-Encoding</FilesMatch>

It still does not work while running the request via our nignx server, because it is adding the Vary: Accept-Encoding header too, when delivering gzip compressed.

So far I can guess this is a problem that only happens with chrome and as a workaround I would change the configuration to append the header only if chrome (haven't checked for safari) is not the client until there is a better fix:

<FilesMatch "(\.js\.gz|\.css\.gz)$">  # Serve correct encoding type.  Header set Content-Encoding gzip  # Force proxies to cache gzipped & non-gzipped css/js files separately.  BrowserMatch "Chrome" ChromeFound  Header append Vary Accept-Encoding env=!ChromeFound</FilesMatch>