防止浏览器缓存角度模板答案

【问题标题】：Prevent browser cache of angular templates防止浏览器缓存角度模板
【发布时间】：2014-08-21 05:11:54
【问题描述】：

我一直在研究这个问题，这很简单：现代浏览器（chrome / FF）正在缓存东西，html页面等等。
当您发布新版本时，Angular 会获取这些模板。但是，由于浏览器提供这些页面的缓存版本，而不是新的更新版本。

我已经阅读了大约 2000 篇关于如何实现这一目标的文章。没有一个“元”标签对我有用..（例如：Using <meta> tags to turn off caching in all browsers?）唯一可行的方法是通过添加一些参数值http://bla.com?random=39399339 来手动管理文件的版本。但是，如果只是有时需要“清除缓存”（主要是在版本之间），这真的很烦人并且很难维护。

浏览器是否有可能不提供一种简单、受控的方式来手动“清除缓存”。在服务器或客户端方式上？

附： Angular 模板使管理变得更加困难。

【问题讨论】：

在文件末尾附加一些随机数/文件哈希/时间戳是我一直在做的事情，我同意这很烦人。或者，您可以在服务器提供文件时设置缓存标头，以便它们永远不会被缓存
你选择了什么路径来解决这个问题？
使用 angularjs gulp templatecache 包。编写 gulp 规则以将视图直接打包到代码中。有史以来最好的升级，应用程序在几毫秒内加载。

标签： javascript html angularjs caching

【解决方案1】：

这是一个有很多答案的问题，它取决于你的服务器等......

通常不缓存 HTML 文件
AngularJS 在第一次调用模板后缓存模板，使用 $templateCache 服务（在应用程序运行时）
您可以使用带有 grunt 或 gulp 的 html2js 在一个 JavaScript 文件中编译您的模板
很多人不依赖客户端缓存、etags 等...而是为静态资源 uri 添加版本、哈希、后缀和/或前缀

【讨论】：

不幸的是，静态 HTML 文件被正常缓存。

【解决方案2】：

我正在使用拦截器。如果请求包含精确的 url 块（模板路径），我设置标题“Cache-Control”：“no-cache, must-revalidate”

$httpProvider.interceptors.push(function($q,ngToast) {

        return {
            request: function(config){
                if(config.url.includes('some_url_to_your_template')){
                    Object.assign(config.headers,{"Cache-Control": "no-cache, must-revalidate"});

                }

                return config;
            }
        }
})

【讨论】：