当浏览器选项卡处于非活动状态时无法到达Cloud Firestore后端（AngularFire）

Question

[在Angular应用程序中，我有一个home组件，可通过提供的URL从Firestore加载配置文件的内容（例如：mypage.com/username搜索名为“ username”的配置文件）。现在我认为这很好，但是我注意到了一些非常奇怪的行为：

• 在活动选项卡中加载配置文件（意味着用户当前在此选项卡上总是加载该配置文件
• 在新的当前不活动的选项卡中打开配置文件（意味着用户当前仍在打开其他选项卡），并且让该选项卡完全加载也有效
• 在新选项卡中打开配置文件并切换到该配置文件时，仍在加载它会产生以下错误：无法到达Firestore后端。后端在10秒内没有响应...

在最后一种情况下，Firestore会引发错误，并且查询仅返回一个空数组。在这一点上，我通常会显示404消息，因为我认为找不到该配置文件（尽管在这种情况下它存在）。如果发生此错误，则在选项卡处于活动状态时（用户切换到此选项卡），Firestore查询仍会返回结果对象，但请记住，这种情况是在它已经引发错误并返回空数组（以及我的操作（显示404）之后发生的）基于第一个结果）

我正在使用@ angular / fire 6.0.0，但此行为在5.2.3之类的早期版本中也存在。

app-routing.module.ts

const routes: Routes = [
  { path: '', component: LandingComponent },
  { path: 'login', component: LoginComponent },
  { path: ':id', component: HomeComponent }
];

home.component.ts：

ngOnInit() {
   this.route.paramMap.subscribe(param => {
     let routeParam = param.get("id").toLowerCase()
     this.firebaseServcie.queryProfileByUniqueName(routeParam).subscribe(res => {
       if (res.length > 0) {
         //profile found ... some further actions
       }
       else {
         //profile not found ... usually show 404 message
       }
     });
   }
}

firebase.service.ts：

queryProfileByUniqueName(uniqueName: string): Observable<Profile[]> {
return this.firestore.collection<Profile>("profiles", ref => ref.where('uniqueName', '==', uniqueName))
  .valueChanges();
 }

---

我已经通过使用ngFor管道在Obervable数组上对async进行了迭代来解决。这种解决了我的问题，但错误仍然按照我上面描述的方式抛出。我真的很想确定这是我方面还是Firebase的问题。

Answer 1

在新标签页中打开配置文件并切换到它时加载会产生以下错误：无法到达Firestore后端。后端在10秒内没有响应...

原因是您启用了持久性。禁用持久性，您的错误将得到解决。

打开多个选项卡后，一次只能在一个选项卡中启用持久性。会话之间不会自动清除Cloud Firestore的缓存。

这已在Firebase文档中记录]

https://firebase.google.com/docs/firestore/manage-data/enable-offline#configure_offline_persistence