微前端中的角PWA

编程问答 2022-06-10

问题描述

我有几种使用“ app-shell”类应用程序的微前端设置，用于域根和第一个路径元素上的每个微前端。每个应用程序都像使用共享库的复用独立的角度应用程序一样来构建，以重用常见的组件和功能。他们生活在自己的独立Docker容器中，并使用Nginx代理映射绑定在一起。

mydomain.com/         <- domain root app
            /child1   <- micro apps 
            /child2
            /child3
            /child4

我想设置一个角度服务工作者来缓存我们所有的资源。

第一次尝试

每个应用都有一名服务人员。因此，域根应用程序只有一个，而我们的每个“子应用程序”都只有一个。 那是;每个独立的角度应用程序一个ngsw-config.json。

问题

这导致两个软件专家在每个子应用程序中争用缓存控制，并且最终用户可能会选择哪种版本取决于哪个获胜者。

第二次尝试

让一个服务人员将所有规则都统治，将其放在域根应用上，并尝试使用ngsw-config.json或assetGroup.resources.files来缓存每个“子应用”的资源{1}}。这些似乎都不会将子应用程序的资源映射到其缓存中-至少在检查DevTools AppCache存储库时不会如此，尽管“网络”选项卡确实报告正在从ServiceWorker提供资源文件。 ?

问题

这里的问题是，当部署新版本时，应用程序不再报告。我猜这是因为angular-cli无法知道child-apps构建时间的编译资源名称。它们必须在运行时进行缓存。无论如何，我不能绝对确定我的任何资源是否都已缓存。通过切换到离线模式，没有任何反应。

此外，有时我们仍然会遇到首先加载较旧版本的域根应用的情况，因此我们必须刷新页面以获取更新的版本。我注入了代码，以清除第一次尝试中的第二个服务人员。以下代码将删除所有注册到assetGroup.resources.urls的服务人员：

mydomain.com/childX

我看到的另一个观察结果是，在DevTools / Application / Cache存储中，每个新版本哈希值正好有4个条目，并且保留所有版本。我以为找到新版本后它将覆盖缓存。

当前设置：

运行// Force remove old redundant service workers if ('serviceWorker' in navigator) { navigator.serviceWorker.getRegistrations().then(registrations => { registrations .filter(r => 'scope' in r && r.scope !== `${location.protocol}//${location.host}/`) .forEach(r => r.unregister()); }); } ：10.1.4

ngsw-config.json 

@angular/service-worker

app.component.ts 

    {
      "$schema": "./node_modules/@angular/service-worker/config/schema.json","index": "/index.html","assetGroups": [
        {
          "name": "root","installMode": "prefetch","updateMode": "prefetch","resources": {
            "files": [
              "/assets/icons/favicon.ico","/index.html","/manifest.webmanifest","/*.css","/*.js","/*.txt"
            ]
          }
        },{
          "name": "apps","installMode": "lazy","resources": {
            "files": [
              "/**/assets/icons/favicon.ico","/**/index.html","/**/manifest.webmanifest","/**/*.css","/**/*.js","/**/*.txt"
            ]
          }
        },{
          "name": "root-assets","resources": {
            "files": [
              "/assets/**","/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
            ]
          }
        },{
          "name": "apps-assets","resources": {
            "files": [
              "/**/assets/**","/**/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
            ]
          }
        }
      ]
    }

问题

应该如何配置它，以便服务工作者能够正确缓存我的资源，并且（如果每个应用程序需要一个资源）不能互相冲突？

编辑

对于其他在这个问题上苦苦挣扎的人；可能可以使用Webpack 5中新的Module Federation系统解决，该系统据说是与Angular 11（https://www.angulararchitects.io/aktuelles/the-microfrontend-revolution-part-2-module-federation-with-angular/）一起发布的。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angularmicro-frontend