如果容器更新而不刷新浏览器，如何获取最新的 UI 更改

Question

我有一个 Angular 微前端应用程序，我使用模块联合构建了它。它在生产环境中使用 Docker 容器运行。

我的问题是，如果用户浏览一些微前端应用程序，同时特定应用程序的容器发生更改，那么我如何更新到最新的 UI 更改，而无需用户刷新网页。

我当前的实现是这样的，只有在页面刷新时我才能获取最新的更改。

我无法通过特定的 mfe 路由来获取最新的更改，因为它是一个延迟加载的组件，因此 Angular 第二次从缓存中提供它。

有没有办法在用户每次访问时调用下面共享的这条路由，而不是在用户第二次访问时从缓存中获取它。

{
    path: 'app-1',
    title: 'First App',
    canActivate: [AuthGuard],
    loadChildren: () =>
      loadRemoteModule({
        type: 'manifest',
        remoteName: 'app-1',
        exposedModule: './Module',
      })
        .then((m) => m.AppModule)
        .catch((err) => {
          return import('./page-not-found/page-not-found.module').then(
            (m) => m.PageNotFoundModule
          );
        }),
  },

或者，我应该采取什么方法来通知用户有关容器中的更改，以便他们可以手动刷新页面以获取最新更改？

Answer 1

您可以使用应用程序的版本创建一个 JSON，并使用 Guard 来获取此 JSON 并将该版本与应用程序的最新版本进行比较（您可以将此数据存储在环境中）。如果版本不同，您可以触发客户端浏览器刷新以获取最新版本。