Angular+Service Worker：如何将environment.ts的apiUrl传入sw-sync.js并共享变量？

我来帮你搞定这个问题——在Angular里让主应用和Service Worker共享apiUrl这类动态配置，同时方便CI集成，其实不用大动现有数据结构，有几个实用的方案：

方案1：通过静态配置文件注入（最适合CI场景） #

这是我最推荐的方式，完全贴合CI的“构建时替换配置”需求：

1. 创建独立的配置文件
   在src/assets/目录下新建app-config.json，内容如下：

{
  "apiUrl": "https://your-production-api.com",
  "otherConfig": "value"
}

2. 让Service Worker缓存这个文件
   修改ngsw-config.json，把这个配置文件加入到assetGroups的resources里，确保SW能获取并缓存它：

{
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/assets/app-config.json", // 加入这行
          "/*.css",
          "/*.js"
        ]
      }
    }
  ]
}

3. 在Service Worker中读取配置
   在你的自定义SW脚本（或者扩展默认ngsw的脚本）里，通过fetch获取配置文件：

// 自定义Service Worker脚本中
async function getAppConfig() {
  try {
    const response = await fetch('/assets/app-config.json');
    if (!response.ok) throw new Error('Failed to fetch config');
    return await response.json();
  } catch (err) {
    // 降级处理，比如用默认值
    return { apiUrl: 'https://fallback-api.com' };
  }
}

// 使用配置的示例：比如在fetch拦截逻辑中
self.addEventListener('fetch', (event) => {
  if (event.request.url.includes('/api/')) {
    event.respondWith(
      getAppConfig().then(config => {
        const modifiedUrl = event.request.url.replace(/https:\/\/old-api\.com/, config.apiUrl);
        return fetch(modifiedUrl);
      })
    );
  }
});

4. CI集成
   CI构建时，只需要替换src/assets/app-config.json里的变量值就行（比如用sed、envsubst或者CI工具的文件替换功能），完全不用改动代码。

方案2：通过PostMessage从主应用传递配置 #

如果你的配置是在主应用运行时才能确定的（比如用户登录后动态获取），可以用这种方式：

1. 主应用发送配置
   在主应用的初始化代码中，等SW注册成功后发送配置：

// app.component.ts
import { SwUpdate } from '@angular/service-worker';

constructor(private swUpdate: SwUpdate) {
  if (swUpdate.isEnabled) {
    swUpdate.available.subscribe(() => {
      // SW更新后重新发送配置
      this.sendConfigToSW();
    });
    // 初始发送配置
    this.sendConfigToSW();
  }
}

private sendConfigToSW() {
  const config = { apiUrl: environment.apiUrl };
  if (navigator.serviceWorker.controller) {
    navigator.serviceWorker.controller.postMessage({ type: 'SET_CONFIG', payload: config });
  }
}

2. Service Worker接收并存储配置
   在SW中监听message事件，把配置存在CacheStorage或者IndexedDB里：

// Service Worker中
self.addEventListener('message', (event) => {
  if (event.data.type === 'SET_CONFIG') {
    // 存在CacheStorage里，方便后续获取
    caches.open('app-config').then(cache => {
      cache.put('/config', new Response(JSON.stringify(event.data.payload)));
    });
  }
});

// 获取配置的函数
async function getAppConfig() {
  const cache = await caches.open('app-config');
  const response = await cache.match('/config');
  return response ? await response.json() : { apiUrl: 'fallback-url' };
}

方案3：自定义Service Worker并注入环境变量（需要调整构建流程） #

如果你不想用默认的ngsw，或者需要更灵活的配置注入，可以自定义SW，然后在构建时用CI工具注入环境变量：

1. 创建自定义SW脚本
   在src/下新建custom-sw.js，用占位符表示动态变量：

const API_URL = '__API_URL__';

self.addEventListener('fetch', (event) => {
  // 使用API_URL变量处理请求
});

2. 修改Angular构建配置
   在angular.json里配置使用自定义SW：

{
  "projects": {
    "your-app": {
      "architect": {
        "build": {
          "options": {
            "serviceWorker": true,
            "ngswConfigPath": "src/custom-sw.js" // 指定你的自定义SW路径
          }
        }
      }
    }
  }
}

3. CI构建时替换占位符
   在CI脚本中，用环境变量替换SW里的占位符，比如用bash命令：

sed -i "s/__API_URL__/$PROD_API_URL/g" dist/your-app/custom-sw.js

是否需要调整应用的数据结构设计？ #

完全不需要大改！你只需要把动态配置从业务代码中抽离出来：

• 要么统一用assets/app-config.json作为配置源，主应用也从这里读取（而不是硬编码）；
• 要么继续用Angular的environment.ts，然后通过方案2的PostMessage传递给SW。

这样主应用和SW的配置来源保持一致，CI只需要维护一个配置入口，非常方便。

内容的提问来源于stack exchange，提问作者Danil Valov