我正在使用 MEAN 堆栈（mongo、express、angular 和 node）。我相对频繁地部署到生产环境……每隔几天。我担心的是我有时会更改客户端代码和 API，我宁愿不必确保 API 与以前版本的客户端代码的向后兼容性。
在这种情况下，当我推送到生产环境时，确保所有客户端重新加载的最有效方法是什么？例如，我看到 Evernote 有一个弹出窗口，上面写着请重新加载浏览器以获取最新版本的 Evernote。我想做一些类似的事情...我是否需要沿着 socket.io 或 sock.js 的路径走下去，还是我错过了一些简单的东西并且有更简单的方法来实现这一点？
【问题讨论】：
标签： javascript node.js socket.io client mean-stack
更新： AppCache 已于 2015 年夏季弃用，因此以下不再是最佳解决方案。新的建议是改用Service Workers。然而，Service Workers 目前仍在试验 IE 和 Safari 中的粗略（阅读：可能没有）支持。
另外，许多构建工具现在无缝地结合了缓存清除和文件“版本控制”技术来解决 OP 问题。 WebPack 可以说是这个领域的当前领导者。
这可能是使用 HTML5 的 AppCache 的一个很好的用例
您可能希望将其中一些步骤自动化到您的部署脚本中，但这里有一些代码可能对您有所帮助。
首先，创建您的 appcache 清单文件。这也将允许您在客户端浏览器中缓存资源，直到您明确修改 appcache 清单文件的日期。
/app.appcache:
CACHE MANIFEST
#v20150327.114142
CACHE:
/appcache.js
/an/image.jpg
/a/javascript/file.js
http://some.resource.com/a/css/file.css
NETWORK:
*
/
在 app.appcache 中，#v20150327.114142 行上的注释是我们向浏览器指示清单已更改并且应重新加载资源的方式。它可以是任何东西，真的，只要文件在浏览器中看起来与以前的版本不同。在应用程序中部署新代码期间，应修改此行。也可以使用构建 ID。
其次，在任何你想使用appcache的页面上，修改header标签如下：
<html manifest="/app.appcache"></html>
最后，您需要添加一些 Javascript 来检查 appcache 是否有任何更改，如果有，请对其进行处理。这是Angular module。对于这个答案，这里有一个普通的例子：
appcache.js：
window.applicationCache.addEventListener('updateready', function(e) {
if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
// Browser downloaded a new app cache.
// Swap it in and reload the page to get the latest hotness.
window.applicationCache.swapCache();
if (confirm('A new version of the application is available. Would you like to load it?')) {
window.location.reload();
}
}
else {
// Manifest didn't changed. Don't do anything.
}
}, false);
或者，如果 AppCache 不适用于您的情况，则更偏僻的解决方案是创建一个简单的 API 端点，该端点返回当前构建 ID 或上次部署日期时间。您的 Angular 应用程序偶尔会遇到此端点并将结果与其内部版本进行比较，如果不同，则重新加载自身。
或者，您可以考虑使用实时重新加载脚本 (example)，但是，虽然对开发很有帮助，但我不确定使用实时/就地重新加载资产的想法有多好正在生产中。
【讨论】：
Deprecated This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped. Do not use it in old or new projects. Pages or Web apps using it may break at any time. .... Use Service Workers instead.
也许您可以将哈希添加到您的客户端代码文件名。例如app-abcd23.js.
所以浏览器将重新加载文件而不是从缓存中获取它。或者您可以将哈希添加到 url.eg app.js?hash=abcd23 但某些浏览器可能仍使用缓存版本。
我知道 rails 有 assets-pipline 来处理它，但我不熟悉 MEAN stack。为此，npm 中应该有一些包。
如果您想通知用户他们的客户端代码已过期，我认为没有必要使用socket.io。您可以在html meta tag 和js 文件中定义您的版本，如果不匹配，显示一个弹出窗口并告诉用户刷新。
【讨论】：
我会先告诉你我的问题，然后我会推荐一个暂定的解决方案。我想强制我的用户注销，然后在部署生产构建时登录。在任何时候，都会有两个版本的软件部署在生产环境中。 FE 知道的软件版本和 Backend 知道的版本。大多数时候它们是一样的。在任何时候，如果它们不同步，那么我们需要重新加载客户端，让客户端知道已经推送了新的生产版本。
我假设 99.99% 的时间后端都知道在生产环境中部署的软件的最新版本。
以下是我愿意推荐的两种方法：-
后端 API 应始终在响应标头中返回最新版本的软件。在前端，我们应该有一段通用代码来检查 API 返回的版本和 FE 上的版本是否相同。如果没有，则重新加载。
每当用户登录时，BE 都应在 JWT 中编码最新的软件版本。并且 FE 应该继续将其作为不记名令牌与每个 API 请求一起发送。 BE 还应该为每个 API 请求编写一个通用拦截器。这将比较从 API 请求收到的 JWT 中的软件版本和
【讨论】：
【讨论】：
我最近遇到了同样的问题。我通过在我的 js/css 文件中附加我的应用程序的内部版本号来解决此问题。我所有的脚本和样式标签都包含在一个通用包含文件中的脚本中，因此在 js/css 文件路径的末尾添加一个“内部版本号”很简单
/foo/bar/main.js?123
这个 123 是我在同一个头文件中记录的一个数字。每当我希望客户端强制下载应用程序的所有 js 文件时，我都会增加它。这让我可以控制何时下载新版本，但仍然允许浏览器在第一个请求之后为每个请求利用缓存。直到我通过增加内部版本号来推送另一个更新。
这也意味着我可以拥有一个任意长的缓存过期标头。
【讨论】：
在构建过程中设置本地存储的唯一键 我正在使用 react static 并加载我自己的数据文件，每次我的内容更改时我都会在其中设置 ID
然后前端客户端从本地存储中读取密钥 （如果key不存在一定是浏览器第一次访问） 如果本地存储的密钥不匹配，则表示内容已更改 下面的火线强制重新加载
window.replace(window.location.href + '?' + key)
在我的情况下，我不得不再次运行同一行 喜欢
setTimeout( (window.replace(window.location.href + '?' + key))=> {} , 1000)
完整代码如下：
const reloadIfFilesChanged = (cnt: number = 0, manifest: IManifest) => {
try {
// will fail if window does not exist
if (cnt > 10) {
return;
}
const id = localStorage.getItem('id');
if (!id) {
localStorage.setItem('id', manifest.id);
} else {
if (id !== manifest.id) {
// manifest has changed fire reload
// and set new id
localStorage.setItem('id', manifest.id);
location.replace(window.location.href + '?' + manifest.id);
setTimeout(() => {
location.replace(window.location.href + '?' + manifest.id + '1');
}, 1000);
}
}
} catch (e) {
// tslint:disable-next-line:no-parameter-reassignment
cnt++;
setTimeout(() => reloadIfFilesChanged(cnt, manifest), 1000);
}
};
【讨论】：