如何配置AngularFire实现指定Firebase集合在移动端本地存储？

结论 #

该需求完全可以通过AngularFire的原生配置实现，不需要引入额外第三方存储库，也不会破坏你现有其余数据的加载、缓存逻辑。

实现步骤 #

1. 版本依赖确认
   确保你使用的是AngularFire 7.x及以上版本（对应Firebase Web SDK v9+），旧版本需要先升级到兼容版本，Capacitor打包的移动端WebView完全支持该特性。

2. 开启磁盘级离线持久化
   默认AngularFire的缓存是内存级的，App退后台后就会清除，首先需要在Firestore初始化时开启磁盘持久化，该配置仅会持久化你主动指定要缓存的集合数据：

// app.module.ts 核心配置
import { NgModule } from '@angular/core';
import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
import { getFirestore, provideFirestore, enableMultiTabIndexedDbPersistence } from '@angular/fire/firestore';
import { environment } from '../environments/environment'; // 你的firebase配置文件

@NgModule({
  imports: [
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideFirestore(() => {
      const firestore = getFirestore();
      // 开启磁盘持久化
      enableMultiTabIndexedDbPersistence(firestore).catch(err => {
        // 异常处理，移动端单页应用几乎不会触发以下异常
        if (err.code === 'failed-precondition') {
          // 多标签页同时打开时持久化冲突的降级逻辑
        } else if (err.code === 'unimplemented') {
          // 运行环境不支持IndexedDB的降级逻辑
        }
      });
      return firestore;
    }),
    // 其余原有模块导入保持不变
  ]
})
export class AppModule { }

3. 指定关键集合预加载缓存
   每日回到WiFi环境同步数据时，主动对需要离线访问的关键集合做一次全量查询并保持快照监听，Firebase会自动将该集合的全量数据持久化到本地磁盘：

// 数据服务核心逻辑示例
import { Injectable } from '@angular/core';
import { Firestore, collection, collectionData } from '@angular/fire/firestore';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class DataService {
  // 全局持有关键数据的监听Subject，保证缓存不会被回收
  private criticalCollection$ = new BehaviorSubject<any[]>([]);

  constructor(private firestore: Firestore) {}

  // 每日WiFi联网时调用一次，触发全量数据缓存到本地
  preloadCriticalData() {
    const collectionRef = collection(this.firestore, '你需要离线存储的集合名称');
    collectionData(collectionRef, { idField: 'id' }).subscribe(data => {
      this.criticalCollection$.next(data);
    });
  }

  // 野外离线状态下直接调用该方法获取本地缓存数据
  getOfflineCriticalData() {
    return this.criticalCollection$.asObservable();
  }
}

4. 其余集合逻辑保持不变
   不需要离线访问的集合，你可以完全沿用之前的AngularFire查询逻辑，默认只会缓存最近查询的少量数据到内存，App退出后自动清除，不会占用多余本地存储空间。

补充说明 #

• 本地磁盘缓存默认最大容量为40MB，如果你需要存储的数据量更大，可以在开启持久化时通过persistenceSettings参数调整上限。
• 离线状态下对关键集合做的增删改操作会自动存入本地队列，下次联网时会自动同步到Firebase云端，不需要手动编写同步逻辑。

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