5

I'm using angular with i18n translations in json files like de.json and en.json. In my production environment (nginx) I have the problem that these JSON files are cached by the web browser. After an upgrade, Chrome will not download the new version of the current json file even though the date header has changed.

Request Information (Chrome):

Response Headers:

  • content-encoding: gzip
  • content-type: application/json
  • date: Fri, 15 Feb 2019 09:04:42 GMT
  • etag: W/"5c62bf4d-2aea"
  • last-modified: Tue, 12 Feb 2019 12:42:53 GMT
  • server: nginx/1.14.0 (Ubuntu)
  • status: 304

Does anyone have experience with this problem and can help me?

MBDev
  • 442
  • 1
  • 4
  • 14
  • please copy the request as `curl` and try to run it, then you'll know if `304` comes from the browser cache or from nginx – Guerric P Feb 17 '19 at 19:58

1 Answers1

2

Not specifically a fix for Angular/nginx, but a practice I often use is to append a query string parameter to the resource when you load it. For me, this is typically derived from version number of the .js file / application, e.g. using it as a seed for a RNG

So, instead of: <script src="/assets/de.json" />

use <script src="/assets/de.json?_=12345" />

Bonus points- in your Angular application, you can keep track of what version of the assets that you want to include, meaning that you can release new asset files without having clients immediately update to them if they have them in local cache (although note that new clients will get the new version regardless)

AndrewP
  • 1,598
  • 13
  • 24
  • You are right, this is not what I searched for. But the query params automatically add the request header "cache-control: no-cache", so it works. I am not sure if this is a problem of Chrome or nginx, since in my request date is more recent than last modified date. Thanks :) – MBDev Feb 19 '19 at 08:50
  • The server might be sending the "last-modified" header, but if the browser is never requesting it, it doesn't matter. There are headers to set expiry date, etc, but the easiest solution (that I have found) is to use the query string approach as mentioned above. – AndrewP Feb 19 '19 at 23:46