Question

目标：目标是让最终用户无需手动清除缓存即可查看更新的网站。

设置：客户端：Angular 1.4 服务器端：Azure Web Apps 部署方法：Azure链接到bitbucket帐户上的分支，并检测从git推送到此帐户的更新。

问题：质量保证报告称她无法看到更新。我提到这可能是缓存并清除缓存以查看以下网站中提到的更新：

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

她指出，本网站的用户不会知道清除缓存以查看更新（即使它就像按ctrl + shift + r一样简单）。

尝试解决问题的研究和步骤：

我研究了这个主题，并在index.html中添加了以下元标记以停止缓存：

<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" />

我通过更新页面的标题测试了这个更改，这似乎在她的最终工作，因为页面标题更新，而不需要清除她的缓存。但是，今天QA报告该页面显示不正确，她需要刷新缓存以正确查看页面。在模型/视图/任何结构中进行了很多更改，因此我无法确定结构中发生这种突破性更改的位置。

对我而言，这似乎是用户查看网站更新的一个非常常见的要求。最终用户自动查看网站更新的最佳做法是什么？我非常感谢您提供的任何有用的建议或步骤。

Answer 1

这应该可以解决您的问题。我在这里找到了： 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;
        }
    };
}]);

这将为您的请求添加缓存清除参数以获取模板文件。该示例查找了对/partials的所有来电，但我建议更改此内容以查找以.html结尾的请求。

执行此操作的简单方法是使用+new Date()而不是constants.cache。这样它将始终拉出最新版本的模板文件。如果您在模板文件尚未更改时不关心缓存模板文件，则可以轻松解决此问题。

$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

如果提供的.html文件有缓存控制标头告诉他们缓存它，浏览器应该只缓存部分内容。

此答案显示了阻止任何缓存所需的标头：How to control web page caching, across all browsers?

这只适用于当然。已缓存部分内容的用户需要刷新。

为了减少服务器上的负载，您可能需要修改标头，例如缓存一天或1小时，或满足您的发布周期/用户要求的任何内容。

我不认为您使用HTML元标记的方法在这种情况下会起作用，因为浏览器将部分内容加载/呈现为html页面作为普通页面管道的一部分。它们是异步加载的，由Angular编译。因此，您需要将缓存控制置于较低级别（即标题上）。这可能是浏览器特定的，但如果它们不起作用，我希望这就是原因。

Answer 3

如果视图显示不正确，则这是css和/或javascript问题（浏览器缓存css和js）。最简单的解决方法是随机编号，或者在我的情况下，我将我的网页版本放在我的css和js文件中，并在我更新我的网站时更改它

myweb.com/style.css?v=11009

如果版本发生变化，您的客户端浏览器将始终检索您的网站css（因为浏览器会认为它们是两个不同的文件）

用户无法在不清除缓存的情况下看到更新的角度网站

3 个答案: