4

I'm sure this question has been asked before but I can't find one quite the same.

I have an azure cloud service that uses a lot of javascript files. I am still developing the site and so the javascript files change often. When the javascript files have changed I clear my browsing history, selecting 'Temporary Internet files and website files' before re-running the code. However, the website seems to resolutely hold on to my javascript files and keeps running the old code. This is a problem in Chrome, IE and Firefox. If I clear my browsing history a few times it eventually finds the new code.

I know that there are ways to force the browser to reload files by changing the path to the js files for new versions. However I am just testing and don't want to have to update file names each time I change a few lines of code. So I want a way to clear caches within the browser.

I am also using an html5 offline cache for my files so this may be an added complication.

How can I easily clear my old javascript files? Can I do this programmatically?

Rachel Edge
  • 351
  • 2
  • 6
  • 18
  • Are you using asp.net to render pages or pure html? – Wish Mar 29 '16 at 12:07
  • I have a couple of asp pages but most of my pages are html – Rachel Edge Mar 29 '16 at 12:19
  • 1
    I am pretty sure, that programmatically (on the client side) it cannot be done. It could maybe be done on the server, to say hi not to cache. I still think, adding a get parameter to your js includes would be the easiest, like `` where `123` could be a timestamp, and change it when you update the files. I think with gulp or grunt you could update those parameters easily. – Wish Mar 29 '16 at 13:05
  • OK, let's forget about doing it programmatically. I know that changing the filenames works but that takes effort - I have all the files listed in my offline manifest text file so don't think a timestamp would work easily to change all of those. All I want is a way to clear the js file caches when I have my browser open. Is there some reason that 'Clear browsing history' doesn't work? In IE I used to be able to just refresh the page and that would pull in the new files - but that no longer seems to work. – Rachel Edge Mar 29 '16 at 14:15
  • Perhaps [this](http://stackoverflow.com/questions/1341089/using-meta-tags-to-turn-off-caching-in-all-browsers)? – ManoDestra Mar 31 '16 at 17:33
  • I had the same problem on Azure WebApps - restarting the WebApp did the trick, but is time-consuming. – gordon613 Nov 03 '19 at 17:25

1 Answers1

1

I have been down this path a few times and no matter what, with no exception, the method that works is adding a query string variable. This is why so many frameworks (e.g., jquery, angular) will add a cache busting date based value to the query string for ajax). Every other method has resulted in one headache or another, browser inconsistencies, random errors because one file updated but the other didn't.

Here's one example I am currently using that is using Angular within ASP.NET:

@{
     var v = Request.IsLocal ? DateTime.Now.Ticks : ViewBag.Version;
 }

 <script>var version = "@v";
 <script src="/javascript_file.js?v=@v"></script>

I user a local variable (@v) to set a query string value on the file and I also use it to set up a global JavaScript variable that can be used within js for templates and other files.

If I am working locally, then I always get the latest version of each file. Once I deploy, the version number is set at application start up (using the build version for auto incrementing purposes - so that each deployed version build will have a different version number).

This has the downside that some files that DID NOT change will need to be reloaded, but that's better than trying to tell hundreds of users (hit f5 to reload the page)...

!I am not sure how this will impact offline cache, but I think the same might apply.

Tony Basallo
  • 3,000
  • 2
  • 29
  • 47