User cannot see updated angular website without clearing the cache

Question

Goal: The goal is for the end user to see the updated website without having to manually clear the cache.

Setup : Client side : Angular 1.4 Server Side : Azure Web Apps Deployment method : Azure links to a branch on a bitbucket account and detects updates pushed to this account from git.

Issue : Quality Assurance has reported that she could not see the updates. I mentioned that this is probably the cache and to clear the cache to see the updates as mentioned in the following website:

https://pixpa.zendesk.com/hc/en-us/articles/201555604-My-website-changes-are-not-showing-up-How-can-I-clear-my-browser-s-cache-

She pointed out that the users of this website would not know about clearing their cache to see an update (Even it is as easy as pressing ctrl+shift+r).

Research and steps taken to try and resolve the issue:

I researched this topic and added the following meta tags into the index.html to stop caching :

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />

<meta http-equiv="Pragma" content="no-cache" />

<meta http-equiv="Expires" content="0" />

I tested this change by updating the title of the page and this seemed to work on her end in that the title of the page updated without her needing to clear her cache. However, today the QA has reported that the page was not displaying correctly and she needed to refresh her cache to see the page correctly. A lot of changes were made in the Model/view/whatever structure so I cannot determine where in the structure this breaking change would have occurred.

To me, this seems like a very common requirement for the users to see website updates. What is a best practice approach for the end user to automatically see website updates? Any helpful advice or steps I could follow would be greatly appreciated.

Answer 1

This should probably solve your issue. I found it here: https://www.reddit.com/r/angularjs/comments/3j77a2/prevent_browser_template_caching/

$httpProvider.interceptors.push(['constants', function(constants){
    return {
        request: function(config){
            if(config.url.indexOf('partials/') > -1){
                var separator = config.url.indexOf('?') === -1 ? '?' : '&';
                config.url = config.url + separator + 'c=' + constants.cache;
            }

            return config;
        }
    };
}]);

This will add a cache-busting parameter to your requests to get template files. The example looks for all calls to /partials, but I would suggest changing this to look for requests ending in .html.

The simple method of doing this is just using +new Date() instead of constants.cache. That way it will always pull the most current version of the template file. If you don't care about caching the template files when they haven't been changed, this is the easy fix.

$httpProvider.interceptors.push([function(){
    function endsWith(str, suffix) {
       return str.indexOf(suffix, str.length - suffix.length) !== -1;
    }

    return {
        request: function(config){
            if(!endsWith(config.url, '.html')) return config;

            config.url = config.url + '?c=' +new Date();

            return config;
        }
    };
}]);

Answer 2

Browsers should only cache partials if the .html file that was served had a cache control header that told them to cache it.

This answer shows the header required to prevent any caching: How to control web page caching, across all browsers?

This will only apply going forward of course. Users who have already cached a partial will need to refresh.

In the interests of reducing load on your server you may want to modify the header, for example to cache for one day, or 1 hour, or whatever meets your release cycle / user requirements.

I don't think your approach of using HTML meta tags will work in this case as partials aren't loaded/rendered as html pages by the browser as part of a normal page pipeline. They are loaded asynchronously and compiled by Angular. So you need to get the cache control in at a lower level (i.e. on the header). This may be browser specific, but if they aren't working I'd expect that is why.

Answer 3

If the view is not displayed correctly this is css and/or javascript issue (the browser cache the css and js). The easiest work around is to put random number or in my case I put my web version in my css and js file and change it when I'm updating my website for example

example.com/style.css?v=11009 

with this, your client browser will always retrieve your website css if the version is changed (because browser will assume that they are two different file)