FCM服务获取到通知token后对应Observable值未更新如何解决

1. 服务多实例问题（最常见诱因） #

• 问题：你在多个模块/组件的providers数组中重复声明了FcmService，导致App组件触发token更新的服务实例，和业务组件订阅的服务实例不是同一个，自然收不到更新通知。
• 解决方案：
  给FcmService的@Injectable装饰器配置providedIn: 'root'，确保全局只有一个单例，同时删掉所有非根模块/组件的providers中声明的FcmService。

@Injectable({
  providedIn: 'root' // 声明为全局单例服务
})
export class FcmService {
  // 原有服务逻辑
}

2. 原生回调脱离NgZone导致变更未捕获 #

• 问题：PushNotifications属于原生插件，它的事件回调可能运行在Angular的NgZone上下文之外，即使你调用了next方法，Angular也没有捕获到这次变更，不会向订阅者推送新值。
• 解决方案：在回调中用NgZone包裹next逻辑，确保变更进入Angular上下文

import { NgZone } from '@angular/core';

// 服务构造函数注入NgZone
constructor(private ngZone: NgZone) {}

PushNotifications.addListener('registration',
  (token: Token) => {
    console.log('token: ', token);
    this.ngZone.run(() => {
      this.notificationToken.next(token.value);
    });
  }
);

3. 兼容补充方案 #

如果你的业务组件初始化时机远晚于token获取时机，可以在服务中补充同步取值方法，组件初始化时先主动取一次已有值，再监听后续变更：

// FcmService中新增同步取值方法
getCurrentToken(): string {
  return this.notificationToken.value;
}

// 业务组件中调整逻辑
ngOnInit(){
  // 先主动取一次当前已存储的token
  this.notificationToken = this.fcmService.getCurrentToken();
  // 再订阅后续的token更新
  this.fcmService.sharedNotificationToken$.subscribe(token => {
    this.notificationToken = token;
  })
}

调试验证步骤 #

• 在服务的next调用后打印this.notificationToken.value，确认值确实被更新
• 单独打印token.value，确认你取到的token字段值不为空
• 打印服务实例的自定义标识，确认App组件和业务组件调用的是同一个服务实例

内容的提问来源于stack exchange，提问作者Armin Dervić