Angular 12 SwUpdate 可用更新订阅事件不触发问题求助

核心问题根因 #

从提供的NGSW调试日志中Last update check: never可以看出，Service Worker从未成功执行过更新检查，结合堆栈报错信息，根因有两个：

1. 定时检查更新的rxjs流未做错误处理，一旦某次检查请求失败，流直接终止，后续再也不会触发更新检查
2. ngsw manifest文件（ngsw.json）拉取失败，导致更新校验逻辑无法执行

修复步骤 #

1. 修复更新检查逻辑的错误处理 #

原代码中interval触发的checkForUpdate没有错误捕获，rxjs流遇到未处理的错误会直接终止，修改CheckforUpdateService的构造函数逻辑：

import { switchMap, catchError } from 'rxjs/operators';
import { of } from 'rxjs';

export class CheckforUpdateService {
  constructor(public updates: SwUpdate) { 
    if (updates.isEnabled) {
      interval(10*1000).pipe(
        switchMap(() => updates.checkForUpdate()),
        catchError(err => {
          console.error('更新检查失败：', err);
          // 错误吞掉，保证下一次定时任务正常执行
          return of(null);
        })
      ).subscribe(() => console.log('完成一次更新检查'));
    }
  }
  // 其余逻辑保持不变
}

2. 修正部署路径 #

启动http-server时要指向构建产物的项目根目录，而非dist根目录：

• 执行ng build后，确认dist/<你的项目名>目录下存在ngsw.json、ngsw-worker.js文件
• 启动命令修改为：http-server -p 8080 -c-1 dist/<你的项目名>

3. 校验Service Worker配置 #

确认angular.json中项目构建配置已正确开启Service Worker：

{
  "projects": {
    "<你的项目名>": {
      "architect": {
        "build": {
          "options": {
            "serviceWorker": true,
            "ngswConfigPath": "ngsw-config.json"
          }
        }
      }
    }
  }
}

4. 清理旧缓存测试 #

测试前先清理浏览器中已注册的旧Service Worker：

• 打开Chrome开发者工具 -> 应用面板 -> Service Worker
• 找到对应localhost的Service Worker，点击「取消注册」
• 重新打开页面测试即可

5. 生产环境部署注意事项 #

生产环境部署时，需要给ngsw.json、ngsw-worker.js两个文件配置响应头Cache-Control: no-cache，避免浏览器缓存这两个文件，导致永远检测不到新版本。

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