Angular PWA项目中SwUpdate的activated事件未触发如何解决

activated事件未触发的原因 #

你对activated observable的核心作用理解没有错误，它确实会在新版本Service Worker成功激活后触发，收不到回调是两个原因导致的：

• 订阅时机晚于事件触发时机：activated事件在新Service Worker激活完成后立即发射，你手动刷新页面加载新版本时，Service Worker的激活流程远早于AppComponent的ngOnInit生命周期执行，事件发射时你还没完成activated的订阅，自然接收不到回调。
• 没有主动触发新版本Service Worker激活：默认情况下，available事件触发仅代表新版本Service Worker下载完成，新SW会进入waiting状态，需要所有加载了旧版本SW的浏览器标签页完全关闭后才会替换旧SW激活，未主动调用激活API的情况下，激活时机和你预期的刷新后立即激活存在差异。

正确监听activated的实现方式 #

在available事件触发后主动调用activateUpdate()强制激活新版本SW，调整后的代码如下：

import { SwUpdate } from '@angular/service-worker';

export class AppComponent implements OnInit, OnDestroy {
  
  ...
  constructor(private swUpdate: SwUpdate) {}

  public ngOnInit(): void {
    
    ...

    if (this.swUpdate.isEnabled) {
      // 优先注册activated监听，避免漏掉事件
      this.swUpdate.activated.subscribe(() => {
        console.log('activated');
        // 弹出更新说明弹窗
        this.showUpdateDescriptionModal();
      });

      this.swUpdate.available.subscribe(async () => {
        console.log('available');
        // 强制激活新版本Service Worker，无需等待旧标签页关闭
        await this.swUpdate.activateUpdate();
        // 可选：此处可先弹出提示让用户确认是否立即刷新
        // window.location.reload();
      });

      // 应用启动时主动检查是否有新版本
      this.swUpdate.checkForUpdate();
    }
  }
}

不依赖activated的替代方案 #

方案1：本地版本标记法（最稳定，完全不依赖Service Worker） #

在项目中维护一个版本常量，每次发版更新该常量，应用初始化时对比本地存储中记录的上一次运行版本，版本不一致则说明用户刚加载新版本，直接弹出更新提示：

// 每次发版同步更新该版本号
const CURRENT_APP_VERSION = '1.3.0';

public ngOnInit(): void {
  const lastRunVersion = localStorage.getItem('app_last_run_version');
  if (lastRunVersion !== CURRENT_APP_VERSION) {
    // 弹出更新说明弹窗
    this.showUpdateDescriptionModal();
    // 更新本地存储的版本标记
    localStorage.setItem('app_last_run_version', CURRENT_APP_VERSION);
  }

  // 剩余SW相关逻辑
  ...
}

方案2：刷新参数标记法 #

available事件触发时提示用户刷新，用户确认刷新时带自定义参数跳转，应用初始化时检测到参数则弹出更新提示：

public ngOnInit(): void {
  // 初始化时检测更新标记
  const urlParams = new URLSearchParams(window.location.search);
  if (urlParams.has('app_updated')) {
    this.showUpdateDescriptionModal();
    // 清除参数避免刷新重复弹窗
    urlParams.delete('app_updated');
    window.history.replaceState({}, document.title, `${window.location.pathname}${urlParams.toString() ? `?${urlParams.toString()}` : ''}`);
  }

  if (this.swUpdate.isEnabled) {
    this.swUpdate.available.subscribe(async () => {
      // 弹出新版本提示，用户确认后执行刷新
      if (confirm('发现新版本，是否立即刷新加载？')) {
        await this.swUpdate.activateUpdate();
        // 跳转时带更新标记
        window.location.search = window.location.search ? `${window.location.search}&app_updated=1` : '?app_updated=1';
      }
    });
  }
}

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