SPA Angular index.html 未更新缓存（我使用缓存破坏）

Question

我使用了一个简单的结构，类似于我的应用程序 SPA： http://mcalthrop.github.io/angular-spa-demo/#/resources (tks example mcalthrop)

在 index.html（header）中有一个带有缓存 bust（hash）的资产（js、css）的初始加载，之后，只加载模板和 json（body）AngularJS。

问题在于它们是，即随着安装更新的功能仅在用户使用 Ctrl + R（硬重新加载）或注销时才加载。我们的客户可以花几天时间打开页面。

报告了类似的问题： Refreshing a cached Angular SPA

我使用 grails、angular 1.6、主动破坏缓存。

Answer 1

找到“创意”替代方案：

说明：在 SPA 资产文件上加载独特的生命周期应用程序。但是，就我而言，用户登录了很长时间，他们想要新版本的资产而无需新的登录。所以当缓存中的新 js / css 可用时我会做什么，我正在刷新页面。如果没有，请继续。

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();
    }