Angular SPA应使用哪种HTTP响应码通知客户端需更新版本？

核心方案的合理性 #

• 相比轮询，利用现有业务请求捎带版本信息的方案完全贴合你的需求——既不会额外增加异步任务开销，又能在用户触发业务操作时即时检测版本差异，完美适配长期驻留的Angular SPA场景。
• 服务器端只需维护当前最新版本号，收到请求时对比Client-Version请求头，不一致则返回特定状态码（推荐用426 Upgrade Required，语义更贴合）即可触发客户端通知。

Angular端具体实现步骤 #

1. 注入客户端版本信息 #

将应用版本号（可从package.json读取或构建时动态注入）加入环境配置：

// environment.ts
export const environment = {
  production: false,
  appVersion: '1.0.0' // 构建脚本可通过npm脚本或CI工具自动替换为最新版本
};

2. 全局HTTP拦截器统一添加版本请求头 #

创建拦截器，给所有业务接口自动带上版本头（排除静态资源请求）：

// interceptors/version.interceptor.ts
import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable } from 'rxjs';
import { environment } from '../../environments/environment';

@Injectable()
export class VersionInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    // 跳过静态资源，只给业务接口加版本头
    const isStaticAsset = request.url.match(/\.(js|css|html|png|svg)$/);
    if (!isStaticAsset) {
      const versionedRequest = request.clone({
        setHeaders: {
          'Client-Version': environment.appVersion
        }
      });
      return next.handle(versionedRequest);
    }
    return next.handle(request);
  }
}

在app.module.ts中注册拦截器：

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { VersionInterceptor } from './interceptors/version.interceptor';

@NgModule({
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: VersionInterceptor,
      multi: true
    }
  ]
})
export class AppModule { }

3. 响应拦截器处理版本不一致通知 #

捕获服务器返回的特定状态码，弹出更新提示并提供刷新入口：

// interceptors/version-check.interceptor.ts
import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { SnackBarService } from '../services/snack-bar.service'; // 替换为你的UI提示服务

@Injectable()
export class VersionCheckInterceptor implements HttpInterceptor {
  constructor(private snackBar: SnackBarService) {}

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    return next.handle(request).pipe(
      catchError((error: HttpErrorResponse) => {
        // 监听服务器返回的426状态码
        if (error.status === 426) {
          this.snackBar.open(
            '应用已发布更新，请刷新页面获取最新版本',
            '立即刷新',
            { persist: true }
          ).onAction().subscribe(() => {
            window.location.reload();
          });
        }
        return throwError(() => error);
      })
    );
  }
}

同样在app.module.ts中注册该拦截器（注意顺序需在版本请求头拦截器之后）。

服务器端配合要点 #

• 维护全局最新版本号：可从构建产物的版本文件读取，或通过配置中心实时同步。
• 业务接口校验逻辑：对每个请求检查Client-Version头，若与最新版本不匹配，返回426 Upgrade Required状态码，响应体可附带最新版本信息（可选）。
• 静态资源无需校验：Angular的output-hashing机制会在资源文件名中加入哈希，版本更新后文件名自动变化，浏览器会自动拉取新资源。

补充优化建议 #

• 对于长时间无操作的用户，可结合Angular的Idle服务，在用户空闲超过设定时长时发起一次轻量版本检查（可选，不会增加过多开销）。
• 避免在WebSocket连接中捎带版本信息：WebSocket为长连接，建立后不会频繁发送请求头，依赖HTTP业务请求的方式更可靠。

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