标签: ngsw-config

微前端中的 Angular PWA

我有几个微前端设置,使用“app-shell”类型的应用程序用于域根和第一个路径元素上的每个微前端。每个应用程序都像一个独立的 Angular 应用程序一样使用共享库来重用通用组件和功能。它们生活在自己独立的 docker 容器中,并使用 nginx 代理映射绑定在一起。

mydomain.com/         <- domain root app
            /child1   <- micro apps 
            /child2
            /child3
            /child4
Run Code Online (Sandbox Code Playgroud)

我想设置一个 Angular Service Worker 来缓存我们所有的资源。

第一次尝试

每个应用程序有一个 Service Worker。所以域根应用程序有一个,我们的每个“子应用程序”都有一个。那是; 一个ngsw-config.json每独立角应用程序。

问题

这导致两个软件在每个子应用程序中争夺缓存控制权,用户最终可能会看到旧版本,具体取决于哪个赢了。

第二次尝试

有一个服务人员来统治他们,它发生在域的根应用程序,并把它尝试缓存使用的资源每一个“儿童应用”ngsw-config.json的两种assetGroup.resources.filesassetGroup.resources.urls。这些似乎都不会将子应用程序资源映射到其缓存中 - 至少在检查 DevTools AppCache 存储库时不会,尽管网络选项卡确实报告资源文件是从 ServiceWorker 提供的。

问题

这里的问题是应用程序在部署新版本时不再报告。我猜这是因为 angular-cli 无法知道 child-apps build-time 的编译资源的名称。它们必须在运行时缓存。无论如何,我不能完全确定我的任何资源都被缓存了。通过切换到离线模式,没有任何响应。

此外,我们有时仍然会遇到先加载旧版本的域根应用程序,我们必须刷新页面才能获取更新版本。我已经注入了代码来清理我第一次尝试的第二个 service-worker。以下代码删除注册到的所有服务工作线程mydomain.com/childX

mydomain.com/         <- domain root app
            /child1   <- micro apps 
            /child2
            /child3
            /child4
Run Code Online (Sandbox Code Playgroud)

我看到的另一个观察结果是,在 DevTools / Application / Cache 存储中,每个新版本哈希值正好有 4 …

angular micro-frontend ngsw-config

7
推荐指数
1
解决办法
684
查看次数

标签 统计

angular ×1

micro-frontend ×1

ngsw-config ×1