javascript - 如何在 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 对数据的更改使用react。

有关此内容的更多信息，请参阅 How do I Enable Offline Support?在 Getting to know Cloud Firestore视频系列。