Angular新版Service Worker更新重载后更新提示不消失问题

updateAvailable 页面重载后仍为true完全是逻辑写法错误：

• SwUpdate.checkForUpdate() 仅用来主动触发一次服务端版本清单拉取动作，它返回的Promise只会在「检查请求执行完成」时resolve，根本不会判断是否存在待更新版本、也不会关心新版本是否已经激活。
• 页面重载后应用重新初始化，服务构造函数会再次执行checkForUpdate()，你现在只要检查动作跑完就直接把updateAvailable设为true，等于不管有没有更新都强制弹提示，自然重载后提示消不掉。
• 旧版的available、activated事件在Angular v16+版本确实已废弃，官方用SwUpdate.versionUpdates可观察对象替代了原有事件能力，覆盖全流程的更新阶段判断。

你需要通过versionUpdates分发的事件类型判断更新阶段，不要在checkForUpdate()的回调里直接修改更新标记：

• 当事件类型为VERSION_READY：对应旧版available事件，代表新版本已经在后台下载完成、等待激活，此时再将updateAvailable设为true弹出提示
• 当事件类型为NO_NEW_VERSION_DETECTED：代表检查完成无可用更新，保持标记为false即可
• 不需要额外监听更新激活完成的事件：用户点击更新按钮调用激活方法、页面重载后，当前运行的已经是最新版本，初始化检查更新时不会触发VERSION_READY事件，updateAvailable保持默认false，提示会自动隐藏。

完整服务代码参考：

import { Injectable } from '@angular/core';
import { SwUpdate, VersionReadyEvent } from '@angular/service-worker';
import { filter } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class AppUpdateService {
  updateAvailable = false;

  constructor(private swUpdate: SwUpdate) {
    // 非Service Worker环境直接跳过逻辑
    if (!this.swUpdate.isEnabled) return;

    // 仅当新版本下载完成待激活时，才弹出更新提示
    this.swUpdate.versionUpdates
      .pipe(filter((evt): evt is VersionReadyEvent => evt.type === 'VERSION_READY'))
      .subscribe(() => {
        this.updateAvailable = true;
      });

    // 应用启动时主动触发一次更新检查，不要在then回调里改updateAvailable
    this.swUpdate.checkForUpdate();
  }

  // 绑定到模板里更新按钮的点击事件
  async handleUpdateClick() {
    // 激活已下载的新版本
    await this.swUpdate.activateUpdate();
    // 重载页面加载最新版本
    document.location.reload();
  }
}

如果需要做定时检查更新，直接定时调用swUpdate.checkForUpdate()即可，只要不手动修改updateAvailable标记，就不会出现误弹提示的问题。

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