javascript - 确保用户在更新后获得最新版本网站的正确方法

Question

每次我向 Web 应用程序部署更新时，客户都会遇到这样的问题:他们的浏览器没有发现 index.html 已更改，并且由于 .js 文件的名称已更改，因此他们会遇到错误。大概是因为他们的index.html仍然指向不再存在的旧javascript文件。

什么是正确的方法来确保用户在系统更新时始终获得最新版本。

我们有一个 HTML5 + AngularJS Web 应用程序。它使用 WebPack 将 vendor 和应用程序 javascript 捆绑到两个 js 文件中。这些文件包含一个哈希名，以确保它们在发布后是不同的。

一些其他信息

• 我永远无法在本地复制此问题(我的意思是在调试中、在我们的暂存站点或生产站点上)
• 我们使用 CloudFlare，但在发布后清除整个缓存
• 我们在 JS 中有一种机制，可以检查页面加载或每 5 分钟检查一次，以查看 API 的版本是否已更改，如果更改，则显示“请刷新浏览器”消息。单击此运行 window.location.reload(true);
• 我们的后端是 IIS

Answer 1

如果您需要用户在您更新文件后立即加载您的网站时获取最新的 index.html，请将 index.html 设为不可缓存。这意味着浏览器、CloudFlare 和任何中间代理都不允许缓存它，并且该文件将始终由您的规范服务器提供。

当然，这会对流量和延迟产生影响(对您和他们而言)，但如果这确实是您的要求，我看不到任何其他选择。

这方面有一些旋转。 index.html 本身可能不是不可缓存的，您可以插入另一个资源(一个写出正确 script 标签的小型 JavaScript 文件)，如果 index.html 确实很大，缓存它非常重要，等等。但是如果您需要立即获取更改，则需要一个不可缓存的资源来标识更改。