Mark the web as obsolete to force browsers reload its content

Question

I'm working in a dashboard, built in angular, that attacks a backend implemented in java.

I have never worked with angularjs before.

When implementing new features on the frontend and deploying them people need to "hard refresh", in mac, Cmd+Shift+R for Chrome, in order to see the new features.

so far I added this in the meta of the index.html

<meta http-equiv="CACHE-CONTROL" content="NO-CACHE">
<meta http-equiv="CACHE-CONTROL" content="NO-STORE">

But it's not working.

Do you know if angular has some directive, some versioning I can use in order to tell the browser, is time to reload the contents?

Thanks!!!

Are you talking about updated resources, like javascript files or stylesheets? Or the HTML itself? — Joe Enos, Feb 11 '15 at 16:15
This issue has nothing to do with Angular. Browsers, by default, cache resources for performance reasons. You should do some research on this. A simple search would reveal the answer. — Brett, Feb 11 '15 at 16:17

score 0 · Answer 1 · answered Feb 11 '15 at 16:22

The most straightforward way I've used to ensure browsers pull updated copies of resources is to append a unique querystring value to the URLs. When it's time to tell the browser to re-pull, just change the querystring value.

This syntax would be slightly different depending on your server technology (I'm not very familiar with JSP), but in ASP.NET it would look like:

<script type="text/javascript" src="myfile.js?v=<%= Conf.StaticKey %>"></script>

In your code, you could point to your app configuration, and pull a key from there, then just change that key in the config when it's time for a new version:

public static class Conf {
    public static string StaticKey { 
        get { return ConfigurationManager.AppSettings["staticKey"]; }
    }
}

<appSettings>
    <add key="staticKey" value="B0DFAB04-33DC-40E7-9E9F-6619CA6441EA" />
</appSettings>

When the config value changes, the rendered HTML will show a different query string, and so the browser will re-pull the javascript file. The actual query string value is ignored.

score 0 · Answer 2 · edited May 23 '17 at 12:27

To avoid resource caching (such as JS or CSS files) you can add the version number of your angular app to their url

http://example.com/v1.2.3/js/myjsfile.js

in this way as soon as a new version of your app is released the url will change and the browser will download the file again.

For development consider adding a timestamp to such urls instead of the version number

http://example.com/dev/js/myjsfile.js?123124325435

If you want to avoid caching also for the HTML files consider sending no-cache headers to the client

Cache-Control: no-cache, no-store, must-revalidate
Pragma: no-cache
Expires: 0

Here you can find a full post about it (How to control web page caching, across all browsers?)

Be aware that on production disable caching can overload your server.

Mark the web as obsolete to force browsers reload its content

2 Answers2