1

I'm developing a Webapp that uses Angular.js which server by a RESTful API. During the development phase I use my preferred browser which is Chrome, but I just ran some tests in Edge and made some interesting discoveries.

I noticed that the result of a call to the RESTful server was seemingly returning incorrect data. Upon closer inspection I realised that this was due to the Edge browser loading the results from Cache rather than making the call to get the latest and correct results. What's more I realised that I can remove whole functions from my Angular app file and Edge doesn't seem to complain!

The angular function in question:

$http.get(frontbaseurl+'/users/auth_user.json').then(function(response){})

I've read a few responses to questions on SO that suggest various ways to force Edge to not cache results (for example adding a data stamp to the get url), but it sounds hacky and in my case it didn't work anyway.

I can't quite believe my findings. The coder in me wants to shrug my shoulders and put this down to yet another catastrophe from MS, but I can't ignore the fact some unfortunate individuals may have no other choice and could experience errors if they use my web app.

Anyone else experienced this?

Zanon
  • 29,231
  • 20
  • 113
  • 126
Alan A
  • 2,557
  • 6
  • 32
  • 54
  • Do your response headers instruct the browser to cache the resources? Can you provide an example online that reproduces the issue? – Sampson May 15 '16 at 04:20

2 Answers2

1

As a web developer, I really appreciate that browsers put heavy cache to avoid unnecessary requests to my server and help my users to have a faster, and better, experience.

There are many techniques to request the browser to stop caching, but please, don't do that! Caching is very helpful and there are smart ways to prevent the browser to use old content.

I've read a few responses to questions on SO that suggest various ways to force Edge to not cache results (for example adding a data stamp to the get url), but it sounds hacky and in my case it didn't work anyway.

I believe that you missed the point here. You don't add the a data stamp to the get url. You need to add it to the file url.

Wrong:

$http.get(frontbaseurl+'/users/auth_user.json?v=20160510').then(function(response){})

Right:

<script src="/path/to/services.min.js?v=20160510"></script>

Adding the querystring to the file name should be part of your build action.

Community
  • 1
  • 1
Zanon
  • 29,231
  • 20
  • 113
  • 126
0

Perhaps try this:

$http.get(frontbaseurl+'/users/auth_user.json?' +some random number).then(function(response){})

the random number must change in every call

or

$http.get(frontbaseurl+'/users/auth_user.json?' ,{cache:false}).then(function(response){})
Allen King
  • 2,372
  • 4
  • 34
  • 52
  • The OP has stated that even removing the function, it continues to request the URL. So, the problem is not with this function, but with the whole file. – Zanon May 14 '16 at 01:06
  • Adding a random number to the URL will make it appear to the Browser that this is a different URL, hence no value from cache will be returned. As far as I know, Browsers cache by unique URL names. – Allen King May 14 '16 at 01:24
  • You're right regarding the REST call, but what you (and the OP) missed is that the problem is not with the REST call. It's with the entire JS file. The OP stated that he have removed the `$http.get`, but it continues to execute the `get` command. So, it suggested that the file is cached not the REST url. – Zanon May 14 '16 at 01:34
  • @Zanon Adding a number to js file will not work because successive calls will use the same version of JS file, hence the same issue. It has to be the URL to fool the browser and AngularJ that everytime a new URL is being called, hence no caching issues. JQuery does the same unless you provide a unique URL or globally disable JQuery caching or disable JQuery caching per call basis. – Allen King May 14 '16 at 01:47