如何使用Firestore本地缓存且仅更新发生变更的文档？

基础：Firestore 缓存核心特性 #

Firestore移动端、Web端默认提供离线持久化能力，开启后会自动缓存所有查询过的文档数据，且缓存的文档和服务器端的元数据版本对应，可精准识别出服务端发生变更的内容。 #

具体实现步骤 #

1. 开启离线持久化（未开启的情况下需先配置） #

不同端的配置示例：

• Web端：

import { initializeFirestore, enablePersistence, CACHE_SIZE_UNLIMITED } from "firebase/firestore";
const db = initializeFirestore(app, {
  cacheSizeBytes: CACHE_SIZE_UNLIMITED // 日历数据量不大可设为不限制，也可自定义缓存上限
});
await enablePersistence(db);

• 安卓端：

val settings = FirebaseFirestoreSettings.Builder()
    .setPersistenceEnabled(true)
    .build()
db.firestoreSettings = settings

2. 全量日历数据优先读取缓存 #

对应用启动、切换日历月份等需要拉取批量日历数据的场景，显式指定查询源为本地缓存，不会触发全量服务端请求：

// Web端示例，其他端对应设置查询source参数即可
const eventsRef = collection(db, "calendar_events")
// 加时间范围过滤，仅拉取当前展示的时间段数据，减少查询耗时
const q = query(eventsRef, where("eventTime", ">=", currentMonthStart), where("eventTime", "<=", currentMonthEnd))
const snapshot = await getDocs(q, { source: "cache" })
// 处理快照数据渲染日历

3. 监听增量变更同步更新 #

不要全量拉取服务端数据，通过快照监听仅获取发生增删改的文档，同步更新本地缓存和页面即可：

onSnapshot(q, (snapshot) => {
  snapshot.docChanges().forEach((change) => {
    if (change.type === "added") {
      // 处理新增的日历事件，插入本地渲染列表
    }
    if (change.type === "modified") {
      // 处理编辑的日历事件，更新本地渲染列表
    }
    if (change.type === "removed") {
      // 处理删除的日历事件，移除本地渲染列表
    }
  })
})

注意：Firestore的快照监听首次启动时如果本地有缓存，会先返回缓存全量数据，后续仅推送增量变更。如果要避免首次全量回调，可以在开启监听前先完成缓存读渲染，再启动监听处理后续变更。

优化建议 #

• 可以给日历事件加更新时间字段，用户主动触发刷新时，仅拉取更新时间大于上次同步时间的文档，进一步减少请求数据量
• 本地缓存如果累积了大量过期的历史日历数据，可以在用户清理存储时调用clearPersistence()方法清空旧缓存，避免占用过多存储空间
• 单文档的增删改操作默认会同时更新本地缓存和服务端，不需要额外做缓存同步处理

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