SPA Angular index.html not updated cache (i use cache bust)

Question

I use a simple structure, similar to this in my application SPA: http://mcalthrop.github.io/angular-spa-demo/#/resources (tks example mcalthrop)

There is an initial load of assets (js, css) with cache bust (hash) in index.html (header) and after that, only templates and json (body) AngularJS are loaded.

The problem is that they are, that is, the features updated with the installation were loaded only when the user used Ctrl + R (hard reload) or logout. Our customers can spend days with the page open.

Similar problem reported: Refreshing a cached Angular SPA

I use grails, angular 1.6, active busting cache.

Answer 1

"Creative" alternative found:

Explnation: On SPA assets file load unique life sesson application. But, on my case, users logged long time they wanted fresh version assets withou new loggin. So what i do when new js / css on cache bust avaliable, i'm refresh the page. If not, continuos.

function urlAssetOk(url) {
        var http = new XMLHttpRequest();
        var urlWithoutCache = url + "?t=" + (new Date()).getTime();
        http.open('HEAD', urlWithoutCache, false);
        http.send();
        return http.status == 200;
    }

    function updatedCache() {
        var jsApplicationAsset = document.querySelectorAll('[class="application-asset"][src*=application-]')[0];
        var cssApplicationAsset = document.querySelectorAll('[class="application-asset"][href*=application-]')[0];
        var jsObsolete = jsApplicationAsset && !urlAssetOk(jsApplicationAsset.src) ? true : false;
        var cssObsolete = cssApplicationAsset && !urlAssetOk(jsApplicationAsset.src) ? true : false;

        if (jsObsolete || cssObsolete) {
            window.location.reload(true);
        }
    }

    window.onhashchange = function() {
        updatedCache();
    }