部署Angular 11应用时nsgw.json需配置什么HTTP缓存头

你提到的nsgw.json为拼写错误，实际是Angular Service Worker的核心配置文件ngsw.json。

各核心文件的Cache-Control响应头配置规则 #

• ngsw.json：必须配置为Cache-Control: no-cache, no-store, must-revalidate
  这个文件是Angular Service Worker检测版本更新的核心依据，每次应用重新打包部署，该文件内记录的所有静态资源哈希都会更新。如果该文件被浏览器、CDN或其他中间缓存层缓存，Service Worker将永远无法获取到新版本的资源清单，不会触发更新流程，这也是你当前问题未完全解决的核心原因。
• manifest.webmanifest：配置为Cache-Control: no-cache
  该文件是PWA应用清单，控制应用安装后的图标、启动页、主题色、启动URL等配置，不需要强缓存，避免用户长期拿到旧版本清单导致安装态应用异常。
• index.html：你之前配置的no-cahce存在拼写错误，正确配置应为Cache-Control: no-cache, must-revalidate。拼写错误会导致部分浏览器、缓存层无法识别规则，依旧缓存旧版本入口文件，这也是之前修复不彻底的常见原因。
• 其余打包后带内容哈希的静态资源（如main.[contenthash].js、styles.[contenthash].css、哈希命名的图片/字体资源等）：可直接配置为Cache-Control: max-age=31536000, immutable。这类资源文件名和内容强绑定，内容变更后文件名会同步变化，不会出现新旧版本覆盖问题，配置长缓存可以大幅提升二次访问加载速度。

Azure App Service 配置提示 #

如果是通过IIS托管部署，可直接在站点根目录的web.config中配置匹配规则统一添加响应头，无需逐个文件手动设置，基础规则片段如下：

<configuration>
  <system.webServer>
    <staticContent>
      <clientCache cacheControlMode="DisableCache" />
    </staticContent>
    <rewrite>
      <rules>
        <rule name="Route all requests to index.html" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

针对带哈希的静态资源，可以单独加规则匹配.*\.[a-f0-9]{8,}\.(js|css|png|jpg|jpeg|gif|svg|woff|woff2)$这类格式的文件，单独设置长缓存头即可。

额外注意事项 #

就算缓存头配置完全正确，Angular Service Worker默认会在应用启动后台静默拉取更新，新版本资源下载完成后不会立刻激活，需要用户关闭所有打开的旧版本应用标签页后重新访问才会生效。如果需要即时提示用户更新，可以在应用代码中监听SwUpdate服务的versionReady事件，弹出提示引导用户刷新页面激活新版本。

内容的提问来源于stack exchange，提问作者Greg B