NX Workspace全局PWA配置需求：为所有子项目实现统一PWA

步骤1：清理子项目的独立PWA配置 #

• 删除每个子项目下的ngsw-config.json文件
• 编辑各子项目的angular.json，移除architect/build/configurations/production中的serviceWorker配置项，以及@angular/pwa插件的引用
• 删除子项目src/index.html中关于manifest.json的引入和独立Service Worker的注册代码

步骤2：创建全局PWA核心资源 #

在工作区根目录新建pwa-shared文件夹，存放全局统一的PWA配置文件：

1. 全局manifest.json：确保scope设为"/"，覆盖整个域名，示例：

   {
     "name": "Example.com 统一PWA",
     "short_name": "Example PWA",
     "scope": "/",
     "start_url": "/",
     "display": "standalone",
     "background_color": "#ffffff",
     "theme_color": "#1976d2",
     "icons": [
       {
         "src": "/assets/icons/icon-192x192.png",
         "sizes": "192x192",
         "type": "image/png"
       }
     ]
   }
   

2. 全局ngsw-config.json：配置覆盖所有子项目的资源路径，示例：

   {
     "$schema": "./node_modules/@angular/service-worker/config/schema.json",
     "index": "/index.html",
     "assetGroups": [
       {
         "name": "root-resources",
         "installMode": "prefetch",
         "resources": {
           "files": [
             "/favicon.ico",
             "/index.html",
             "/manifest.json",
             "/*.css",
             "/*.js"
           ]
         }
       },
       {
         "name": "sub-projects-assets",
         "installMode": "lazy",
         "updateMode": "prefetch",
         "resources": {
           "files": [
             "/A/**/*.svg",
             "/A/**/*.png",
             "/B/**/*.svg",
             "/B/**/*.png",
             "/C/**/*.svg",
             "/C/**/*.png",
             "/assets/**"
           ]
         }
       }
     ]
   }
   

步骤3：指定主项目承载全局Service Worker #

选择一个子项目作为全局PWA的载体（比如默认入口项目）：

• 执行nx add @angular/pwa --project=你的主项目名安装PWA依赖
• 将主项目的ngsw-config.json替换为根目录pwa-shared/ngsw-config.json，或在主项目的angular.json中指定ngswConfigPath为../pwa-shared/ngsw-config.json
• 在主项目的angular.json中，确保build配置的serviceWorker设为true
• 在主项目的src/index.html中注册根路径的Service Worker：

  if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
      navigator.serviceWorker.register('/ngsw-worker.js')
        .then(reg => console.log('全局SW注册成功:', reg))
        .catch(err => console.log('全局SW注册失败:', err));
    });
  }
  

步骤4：统一子项目的资源引用 #

• 所有子项目的index.html中，统一引入根路径的manifest：<link rel="manifest" href="/manifest.json">
• 配置各子项目的angular.json，将build.outputPath设为dist/A、dist/B等，对应部署后的www.example.com/A、www.example.com/B路径

步骤5：部署配置 #

• 部署时，将各子项目的构建产物放到对应域名路径下，主项目生成的ngsw-worker.js和全局manifest.json放在域名根目录
• 确保服务器允许根路径的Service Worker被访问，且配置正确的Cache-Control头，避免旧SW被缓存

关键注意事项 #

• Service Worker作用域：必须在根路径注册，才能覆盖整个域名，不能在子路径注册
• Manifest的scope：必须设为"/"，确保PWA安装提示针对整个域名，而非单个子项目
• 禁止重复注册：所有子项目不能再单独注册Service Worker，否则会导致冲突

内容的提问来源于stack exchange，提问作者Sanjeeb Kumar Sahoo