如何为Angular PWA应用配置版本号以适配Windows Store增量更新？

1. 正确配置ngsw-config.json的Service Worker版本 #

ngsw-config.json是JSON格式，不能使用分号，version字段需为字符串或数字，正确配置示例如下：

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

注意：这个版本号仅用于Angular Service Worker管理缓存更新，和Windows Store的msixbundle包版本不是同一概念，仅配置它无法改变PWABuilder生成的包版本。

2. 手动控制msixbundle的包版本 #

要让PWABuilder使用指定版本打包，可通过以下两种方式：

• 修改项目根目录package.json中的version字段为目标版本（如"version": "1.0.1.0"），PWABuilder默认会读取该值作为包版本。
• 在PWABuilder打包流程中手动指定：导入项目后进入「Package」步骤，找到「Version」选项，直接输入符合Windows Store要求的4段版本号（如1.0.1.0），覆盖自动生成值。

3. 同步Service Worker与包版本（可选） #

若希望两者版本保持一致，可在构建时自动同步：
在package.json的scripts中添加构建脚本：

"build:prod": "ng build --prod && node -e \"const fs = require('fs'); const pkg = require('./package.json'); const config = JSON.parse(fs.readFileSync('./dist/ngsw-config.json', 'utf8')); config.version = pkg.version; fs.writeFileSync('./dist/ngsw-config.json', JSON.stringify(config, null, 2));\""

运行npm run build:prod时，会自动将package.json的版本同步到打包产物目录下的ngsw-config.json中。

内容的提问来源于stack exchange，提问作者Thomas Degroot