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

Posted 2023-02-19

【中文标题】SPA Angular index.html 未更新缓存（我使用缓存破坏）

【英文标题】：SPA Angular index.html not updated cache (i use cache bust)

【发布时间】：2018-10-29 18:14:10

【问题描述】：

我使用了一个简单的结构，类似于我的应用程序 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、主动破坏缓存。

【参考方案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();
    

【讨论】：

仅代码的答案不被认为是好的。关于它如何工作的解释会很方便！

谢谢提示，我添加答案简短说明