How to disable caching of i18next translation.json files?

Question

I run a single page application in IIS and use the i18next library for translations in my application. The problem is that sometimes when I add new keywords to my translation.json file and click refresh, the browser still uses the old translation caching file, and this causes the user to see the added keywords, but not the translations. For instance. if I add the keyword "somekey": "Some text here..." then somekey will be displayed instead of the specified text.

Since my translation.json file is located in a folder named locales as follows:

 locales en translation.json 

I tried adding the following setting to web.config:

 <location path="locales"> <system.webServer> <staticContent> <clientCache cacheControlMode="DisableCache" /> </staticContent> </system.webServer> </location> 

However, when I looked at network traffic using the Chrome developer tools, I noticed that the translation.json file was still coming from the cache and the Cache-Control: no-cache header was missing. Why is this not working? What is the correct way to disable file caching?

EDIT : just checked the site again and it seems that the translation.json file now has the header Cache-Control: no-cache and it is actually retrieved from the server every time I refresh the page. At the moment, I think the problem could have something to do with our release process and configuration changes that are not applicable. Not sure though.

Answer 1

This is actually more complicated than it sounds. I assume that you are using angular translation module.

I loaded the cache by loading json files:

 $translateProvider.useLoader('$translatePartialLoader', { urlTemplate: 'AppScripts/i18n/{part}-{lang}.json' + '?cb=' + (new Date()).getTime() }); 

Thus, it will never cache language files and will download new ones for each request (without refreshing the page or clearing the cache).

Setting the web configuration is completely ignored, I believe, because there is a way to download files using ajax calls. In addition, json files cannot be reduced using the .net package, because the keys will change during compression, so instead of "MAIN.FIRSTNAME": "Name" you will have something like "abc": "Name" and it will not work because submissions have original names.

You can also use the version if you save it to overlap the cache only when you release a new version, something like

  + '?v=' + myVersionVar 

instead of the current timestamp, which will always download files for each request.

Answer 2

I came across the same situation using combo SPA + i18next + IIS and noticed that sometimes json files were not updated.

The main reason why this is strange at some point is that there is a high chance that you changed the IIS web.config settings AFTER the files were already cached by Google Chrome, since the file was first downloaded without a Cache-Control header Cache-Control .

Cause

There was no Cache-Control: no-cache header in the json files, so after the answer of 304 - Not Modified, he started using the google chrome local disk cache.

Decision

It was agreed

1) Clearing the Google Chrome cache on the "Network" tab (clearing the entire cache also does the job)

2) Placing the web.config file in the / locales / folder with the following staticContent and location rules without specifying the path attribute:

 <?xml version="1.0" encoding="utf-8"?> <configuration> <location> <system.webServer> <staticContent> <clientCache cacheControlMode="DisableCache" /> </staticContent> </system.webServer> </location> </configuration> 

As stated in the docs on the <location> :

path

Use <location> with the missing attribute path configuration parameters in the current directory and all child directories.

---

In this case, I applied the rule specifically in the /locales/ folder so as not to interfere with caching for other static content on the website, such as images, JavaScript files, etc. Expected behavior may vary depending on your decision needs.

Answer 3

what if we turned on binding when deploying the application. as shown below.

#if DEBUG BundleTable.EnableOptimizations = false; #else BundleTable.EnableOptimizations = true; #endif