如何在微前端根应用中实现PWA（基于Angular实践经验）

一、先搭建Angular MFE根应用（Host） #

基于Angular官方推荐的@angular-architects/module-federation实现：

1. 初始化根应用项目

   ng new mfe-root --routing
   cd mfe-root
   

2. 添加模块联邦支持

   ng add @angular-architects/module-federation --project mfe-root --port 4200
   

   执行后会自动生成webpack.config.js和bootstrap.ts，根应用作为Host，后续可通过webpack.config.js中的remotes字段注册子应用（示例：remotes: { mfeApp1: "mfeApp1@http://localhost:4201/remoteEntry.js" }）。

二、迁移已验证的PWA方案到根应用 #

1. 为根应用添加PWA支持 #

如果根应用还未集成PWA，直接执行：

ng add @angular/pwa --project mfe-root

这会自动生成manifest.json、ngsw-config.json，配置angular.json中的PWA构建参数，并在app.module.ts中注册Service Worker。

2. 调整PWA配置适配微前端场景 #

• 修改Service Worker缓存策略：
  编辑ngsw-config.json，在assetGroups中添加子应用的资源路径，确保根应用的Service Worker能缓存子应用资源：

  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/manifest.json",
          "/*.css",
          "/*.js"
        ],
        "urls": [
          "http://localhost:4201/**", // 替换为你的子应用实际地址
          "http://localhost:4202/**"
        ]
      }
    }
  ]
  

  若子应用与根应用跨域，需在子应用的服务器配置CORS，允许根应用域名访问资源。

• 适配Manifest配置：
  确保manifest.json中的start_url和scope覆盖根应用及所有子应用的路径，示例：

  "start_url": "/",
  "scope": "/"
  

• 保留Service Worker注册逻辑：
  根应用app.module.ts中自动生成的注册代码无需修改，确保仅在生产环境启用即可：

  ServiceWorkerModule.register('ngsw-worker.js', {
    enabled: environment.production,
    // 可选：延迟注册，避免影响微前端加载
    registrationStrategy: 'registerWhenStable:30000'
  })
  

3. 关键注意事项 #

• 子应用无需单独集成PWA，避免多个Service Worker冲突，统一由根应用的Service Worker管理所有资源缓存。
• 若子应用已有PWA配置，需移除相关依赖（如@angular/pwa）及Service Worker注册代码。
• 测试时需构建生产版本（ng build --prod），用静态服务器运行（如http-server dist/mfe-root），才能验证PWA的完整功能。

内容的提问来源于stack exchange，提问作者K Anusha