如何在firestore中以离线方式阅读文档并以（在线和离线）方式写入？

Question

最近我使用 Cloud Firestore 和 React Native 创建了一个简单的聊天应用程序。他们的离线和在线同步是一个相当不错的功能。

但是加载（阅读文档）非常耗时。 虽然我为每个用户（10 个用户）分页了 10 个文档，但加载消息仍然很慢，在缓慢的互联网连接中，加载消息需要 10 秒，这不是一个好的体验。

在这里，当我启用离线模式时，它会更快地加载消息（大约 3 秒）。但是这里有个问题：

现在：

可以离线加载消息，并同时保存消息（离线和在线）。

或者有没有其他更好的加载速度的方法？

当我在 firebase 中启用离线功能时，它无法在服务器中保存消息，或者我在保存消息时禁用离线，当我加载消息时它只加载离线消息。

例子：

async function getMessagesOfAllUser(userlist){
    let outstate = false, data = {};
    if (userlist !== null)
        for (let i = userlist.length - 1; i >= 0; i--) {
            outstate = await this.getMessagesOfOneUsers(userlist[i].user);
            if (outstate !== false) data = { ...data, ...outstate };
            if (i === 0) {
                this.setState({ ...this.state, ...data });
            }
        }
}

function getMessagesOfOneUser(user) {
    return db.collection('users/'+user/+'/messages').orderBy("dt", "desc").limit(10).get().then(snap => {
        let l = snap.size;
        if (l > 0) {
            const ourMessage = this.state.me + user;
            this.lastVisible = { ...this.lastVisible, ...{ [user]: snap.docs[l - 1] } };
            for (let i = 0; i < l; i++) {
                if (this.outState[ourMessage] !== undefined)
                    this.outState[ourMessage] = [...this.outState[ourMessage], snap.docs[i].data()];
                else this.outState[ourMessage] = [snap.docs[i].data()];
                if (i === l - 1) return this.outState;
            }
        }
        return false;
    });
}

Answer 1

当您使用get()（不带参数）读取文档时，Firestore 客户端将始终与服务器检查以确保您获得最新数据。

您有两种选择从本地缓存中获取数据：

1. 使用get({ source: "cache" }) (docs)，它将从本地缓存中返回文档。如果本地缓存中不存在该文档，则会引发错误。在这种情况下，您仍然需要检查服务器。

2. 使用onSnapshot() 监听器。当您附加此侦听器时，它会立即使用本地缓存中的值进行回调，就像get({ source: "cache" }) 所做的那样。但它也会与服务器检查数据是否有任何更新。如果有，它会检索更新后的文档，更新本地缓存，并使用更新后的值再次调用您的代码。

如果您在用户界面中显示数据，通常建议使用onSnapshot()，因为这意味着您的 UI 会对数据的更改做出反应。

有关这方面的更多信息，请参阅 Getting to know Cloud Firestore 系列视频中的 How do I Enable Offline Support?。