使用Nginx的Angular i18n json缓存问题

Question

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):

• Request URL: https://[my-site]/assets/i18n/de.json
• Request Method: GET
• Status Code: 200 (from disk cache)
• Remote Address: XXXX:443
• Referrer Policy: no-referrer-when-downgrade

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?

Answer 1

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, eg 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)