微前端中的 Angular PWA

Question

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

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

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

第一次尝试

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

问题

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

第二次尝试

有一个服务人员来统治他们，它发生在域的根应用程序，并把它尝试缓存使用的资源每一个“儿童应用”ngsw-config.json的两种assetGroup.resources.files或assetGroup.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

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

当前设置：

运行@angular/service-worker：10.1.4

ngsw-config.json

// 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());
  });
}

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",
          "updateMode": "prefetch",
          "resources": {
            "files": [
              "/**/assets/icons/favicon.ico",
              "/**/index.html",
              "/**/manifest.webmanifest",
              "/**/*.css",
              "/**/*.js",
              "/**/*.txt"
            ]
          }
        },
        {
          "name": "root-assets",
          "installMode": "prefetch",
          "updateMode": "prefetch",
          "resources": {
            "files": [
              "/assets/**",
              "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
            ]
          }
        },
        {
          "name": "apps-assets",
          "installMode": "lazy",
          "updateMode": "prefetch",
          "resources": {
            "files": [
              "/**/assets/**",
              "/**/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
            ]
          }
        }
      ]
    }

题

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

编辑

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

Answer 1

我遇到了同样的问题，但我解决了它向主应用程序提供子应用程序版本的 json 文件。并通过散列包缓存子应用程序。