启动更新版本的应用程序时如何清除浏览器缓存？答案

【问题标题】：How to clear browser cache when launching updated version of application?启动更新版本的应用程序时如何清除浏览器缓存？
【发布时间】：2019-09-03 01:48:53
【问题描述】：

我正在部署我的 UI 应用程序，它由 AngularJS、Grunt 和其他 UI 东西组成。

每当我更新我的 UI 并使用 apache-tomcat 重新部署它时，浏览器总是从缓存中获取我的资源。（因为css、html等新资源的路径都是一样的）

用户需要按 CTRL+F5（硬重新加载）来清除缓存并使用新资源。

重新部署应用程序时如何强制浏览器清除缓存？

如果我能以某种方式使用 angular + grunt 来完成这项任务，那么它也是很好。

我不想在每次重新部署产品时更新文件的版本控制。由于我的文件在内部也下载了许多 html 文件。

所以我只想清除浏览器缓存。

谢谢！

【问题讨论】：

首先使用 http 标头禁用 index.html 上的缓存，然后添加一些插件 ~cache-bust 来为所有资产添加哈希值。

标签： angularjs tomcat web-applications gruntjs browser-cache

【解决方案1】：

您可以将版本添加到您的 html 文件中

app.factory('preventTemplateCache', function () {
    return {
        'request': function (config) {
            if (config.url.indexOf('partials') !== -1) {
                config.url = config.url + '?t=' + 101;
            }
            return config;
        }
    }
})

并且还为 .js 文件提供版本

 <script src='app.js?v=101'></script>

101 是版本号

【讨论】：

这里的'partials'是包含html文件的文件夹
每次更新产品时都需要修改这个版本？
比较难管理，我有数百个 html 和 js 文件。
在您的 app.js 中添加上述代码，它将为所有 html 提供版本，对于 js 文件，您只需将所有文件版本替换为新版本，您可以使用任何编辑器（如 vscode）查找并替换或崇高。

【解决方案2】：

如果没有文件名版本控制，您将无法更新缓存。但是您不必手动执行此操作。如果您使用 Grunt，只需查看一些 npm 包。比如这个：https://www.npmjs.com/package/grunt-cache-breaker

在重建时，它将为您的资产创建新的哈希值并将它们注入到您的 html 文件中。因此，当您的用户下载您的 html 文件时（它们被下载，它们没有被缓存），这些 html 文件将包含带有新名称的 css 和 js 等资产，因此浏览器将强制下载而不是从内存中获取这些文件。

【讨论】：

是的，这是我解决方案的一部分。但是我们已经为我们的客户提供了便利，他们可以从 UI 中覆盖图像/css。所以在那种情况下，咕噜将无法完成我的任务。顺便说一句，我已经使用 Etag 解决了这个问题。参考：developer.mozilla.org/en-US/docs/Web/HTTP/Headers/ETag