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

Question

我正在部署包含AngularJS、Grunt以及其他UI组件的UI应用程序。每当我更新UI并使用apache-tomcat重新部署时，浏览器总是从缓存中获取我的资源（因为新资源的路径（如css、html）相同）。用户需要做CTRL+F5（硬刷新）才能清除缓存并使用新资源。如何在重新部署应用程序时强制浏览器清除缓存？如果有办法使用angular + grunt来完成此任务，也可以。我不想每次重新部署产品时更新文件版本。因为我的文件内部还下载许多html文件。因此，我希望只清除浏览器缓存。谢谢！

- Jayesh Dhandha

---

从禁用index.html上的缓存开始，使用http头并添加一些插件~cache-bust，以向所有资产添加哈希。 - Petr Averyanov

Answer 1

你不能在没有文件名版本控制的情况下更新缓存。但你不必手动执行此操作。如果你使用Grunt，只需查看一些npm包。例如，像这个：https://www.npmjs.com/package/grunt-cache-breaker 重新构建时，它将为你的资源创建新的哈希，并将其注入到HTML文件中。因此，当用户下载你的HTML文件（它们会被下载，而不是缓存），这些HTML文件将包含具有新名称的CSS和JS等资源，因此浏览器将强制下载而不是从内存中获取这些文件。

- Alonad

---

是的，这是我解决方案中的一部分。但我们为客户提供了可以覆盖UI上的图像/ CSS的功能。因此，在这种情况下，grunt将无法执行我的任务。 顺便说一句，我已经使用ETag解决了这个问题。 参考：https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/ETag - Jayesh Dhandha

Answer 2

你可以为你的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 是版本号

- Hrishi

---

这里的“partials”是包含HTML文件的文件夹。 - Hrishi

每次我更新我的产品时都需要修改这个版本吗？ - Jayesh Dhandha

那将会很难管理，我有数百个HTML和JS文件。 - Jayesh Dhandha

将上述代码添加到您的app.js中，它将为所有html文件提供版本号。对于js文件，您只需用新版本替换所有文件版本即可，您可以使用任何编辑器（如vscode或sublime）进行查找和替换。 - Hrishi