如何在Firestore中將文檔離線閱讀並（在線和離線）寫？

Question

最近，我使用Cloud Firestore和React Native創建了一個簡單的聊天應用程序。 他們的離線和在線同步是一個很好的功能。

但是，在加載（讀取文檔）上花費了大量時間。 盡管我為每個用戶（10個用戶）分派了10個文檔，但是加載消息仍然很慢，但是在緩慢的Internet連接中，加載消息最多需要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對數據中的更改做出反應。

有關更多信息，請參閱如何啟用脫機支持？ 在“ 了解Cloud Firestore視頻”系列中。