页面刷新时未触发 Firestore onSnapshot 取消订阅

Question

我遇到了 Firestore 的 onSnapshot 侦听器在页面刷新或关闭时无法取消订阅的问题。我正在使用 Angular 和 Firestore SDK，并且我已经在 beforeunload 事件中实现了取消订阅逻辑。然而，Firestore 提供的取消订阅功能似乎并不总是执行，Firestore 模拟器和 chrome 网络监控中的请求日志不一致就证明了这一点。即使确实如此，我在模拟器日志中也看不到“ListenHandler onClose”。取消订阅不起作用也很明显，因为每次刷新时 Firestore 文档中的单个更改都会触发成倍的请求。 直接调用取消订阅（每个示例在用户注销时）调用取消订阅时，不会重现此问题

@HostListener('window:beforeunload', ['$event'])
unloadHandler(event: Event) {
  this.unsubscribeFromFirestore();
}

ngOnDestroy() {
  this.unsubscribeFromFirestore();
}

unsubscribeFromFirestore() {
  if (this.unsubscribe) {
    console.log('Unsubscribing from Firestore');
    this.unsubscribe(); // Directly call the unsubscribe function
  }
}

问题：如何确保在页面刷新或关闭期间可靠地调用 Firestore onSnapshot 取消订阅函数？是否有任何最佳实践或替代方法可以有效处理这种情况？

Answer 1

根据 MDN 文档：

beforeunload 事件未可靠触发，尤其是在移动平台上。

特别是：在这种情况下你无法再可靠地进行网络调用。

但是这里无论如何都不需要整个取消订阅逻辑。当页面卸载时，侦听器会自动取消注册 - 因为服务器将无法再向它们传递消息。