时间戳

首页 > 解决方案 > 使用 Angular 10 部署后为客户端自动重新加载

angular - 使用 Angular 10 部署后为客户端自动重新加载

问题描述

目前，我的应用程序已部署，所有 js 都有时间戳版本。现在，当我再次构建我的 Angular 应用程序时，js 将有一个新的时间戳版本。

在此处输入图像描述

有没有办法可以比较我的构建版本，如果不匹配，则允许用户从应用程序中注销？

标签： angularangular10

解决方案

虽然服务工作者在运行中工作，但这里可以使用更通用的解决方案。@Amirhossein 提出了一种很好的实施方式，并且可行的实施方式是可能的。此外，无需为此目的调用任何 API 或制作 API。我们可以 ping 服务器以获取服务器中index.html可用的最新版本，并将其与客户端中的当前版本进行比较。

另一种工作方法

index.html为 Angular 应用程序生成构建后，在文件中添加以下支持。使用我在正文部分添加的脚本并替换实时 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。可以清除此项以删除用户数据。

根据要求，可以通过实现这些方法中的任何一种，使用户使用最新版本的应用程序登录。

是时候使用任何选项重新加载内容了：

  1. window.location.reload(true);deprecated
  2. 显示一个弹出窗口以通知用户有新版本可用。
  3. 要求用户使用说明强制重新加载网站。
  4. 如果您有基于 CloudFront 的环境，请使那里的缓存无效。

它是比服务工作者/PWA 更好的方法吗？

不，老实说，服务人员是解决您的用例的最佳企业。但是，某些旧设备、旧 iPhone 和许多设备仍然不能无缝地使用 PWA 的概念。此外，某些 API 在使用 NFC、蓝牙等方面面临困难。在投入生产之前，请务必进行彻底的研究。

我可以阻止浏览器缓存我的 Angular 应用程序吗？

是的，这在很多方面都是可能的。是服务器（字面意思是你）指示浏览器缓存和不缓存。查看AWS CloudFront中缓存突发/设置缓存标头的示例。根据您的托管服务提供商，可以设置缓存标头来指示浏览器。Cache-Control并且Expires是这里的关键。

推荐阅读