使用 Angular 10 部署后为客户端自动重新加载
目前，我的应用程序已部署，所有 js 都有时间戳版本。现在，当我再次构建我的 angular 应用程序时，js 将有一个新的时间戳版本。
有没有一种方法可以比较我的构建版本，如果不匹配，则允许用户从应用程序注销？
虽然 Service Worker 是动态工作的，但这里可以使用更通用的解决方案。@Amirhossein 提出了一种很好的实施方式，并且一种实用的实施方式是可能的。此外，无需调用任何 API 或为此目的创建一个 API。我们可以 ping 服务器以获取index.html服务器中的最新可用信息，并将其与客户端中的当前可用信息进行比较。
另一种工作方法
生成 Angular 应用程序的构建后，请在index.html文件中添加以下支持。使用我在正文部分添加的脚本，替换实时 URL 而不是 example.com，并替换main-es5应用程序构建生成的最新 javascript。
<html>
<head>
<script src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
</head>
<body>
<script>
$.get("https://example.com/?v=" + Date.now(), data => {
if (!(String(data).includes('main-es5.014e7f2ada629a9a485a.js'))) {
localStorage.clear();
}
}, 'text');
</script>
</body>
</html>这是如何运作的？
该脚本会 ping 您的 URL 并获取当前index.html文件，并将该文件与当前使用的main-es5文件进行比较。
如果匹配，则用户正在运行您的应用程序的最新版本。否则，用户没有使用最新版本的应用程序，并且可以根据使用的身份验证类型注销用户。99% 的情况下，会使用 localStorage、sessionStorage 或 cookie。可以清除它以删除用户数据。
根据要求，可以通过实现这些方法中的任意一种来让用户使用最新版本的应用程序登录。
是时候使用任何选项重新加载内容了：
- window.location.reload(true);
deprecated - 显示弹出窗口以通知用户有新版本可用。
- 要求用户按照说明强制重新加载网站。
- 如果您有基于 CloudFront 的环境，请使那里的缓存无效。
这是比 Service Worker / PWA 更好的方法吗？
不，老实说，服务人员是解决您的用例的最佳业务人员。然而，某些旧设备、旧 iPhone 和许多设备仍然无法与 PWA 概念无缝配合。此外，某些 API 面临着困难，例如 NFC、蓝牙等。在投入生产之前一定要进行彻底的研究。
我可以阻止浏览器缓存我的 Angular 应用程序吗？
是的，这在很多方面都是可能的。是服务器（实际上是您）指示浏览器缓存和不缓存。查看AWS CloudFront中的缓存爆发/设置缓存标头的示例。根据您的托管提供商，可以设置缓存标头来指示浏览器。Cache-Control和Expires是这里的关键。
使用“@angular/service-worker”包的“SwUpdate”，您可以检查应用程序的当前版本和可用版本，并可以通过检查版本来执行您想要执行的操作。
例子：
import { SwUpdate } from '@angular/service-worker';
constructor(private swUpdate: SwUpdate) {}
//Here you can check the versions
this.swUpdate.available.subscribe((event) => {
console.log('current version: ', event.current);
console.log('available version: ', event.available);
if (confirm('Software update avaialble.')) {
this.swUpdate.activateUpdate().then(() => {
//Perform your action here
window.location.reload()
});
}
});
| 归档时间： |
|
| 查看次数： |
499 次 |
| 最近记录： |