啟用離線持久性 Cloud Firestore

Question

我想使用 Cloud Firestore Javascript SDK 啟用離線持久性。 由於 SSR，我以將 firestore 存儲為屬性的方式構建了我的應用程序。

import firebase from "firebase/app";

export class GetFirebase {
private firestore: firebase.firestore.Firestore;
private firebaseApp: firebase.app.App;
private firebaseConfig = {} // has the config from firebase

 private constructor() {
  this.firebaseApp = firebase.initializeApp(this.firebaseConfig);
  this.firestore = firebase.firestore();
 }
}

如果我嘗試使用enablePersistence()方法，我會得到一個無效。

  this.firestore = firebase.firestore().enablePersistence();

我也不能這樣做

  this.firestore = firebase.firestore();
  this.firestore.enablePersistence() // error cannot change settings after firestore is initialized.

我一直在尋找Dart的..級聯運算符的 Typescript 或 Javascript 等價物，但找不到。

Answer 1

對於最新版本 (v9)，以下適用於我：

import {
  connectFirestoreEmulator,
  enableIndexedDbPersistence,
  getFirestore,
} from 'firebase/firestore';

export const getInitializedFirestore = () => {
  const firestore = getFirestore();

  // only enable emulator if in dev mode, and we haven't already enabled it
  if (
    process.env.NODE_ENV === 'development' &&
    (firestore as any)._getSettings().host === 'firestore.googleapis.com'
  ) {
    connectFirestoreEmulator(getFirestore(), '127.0.0.1', 8080);
    console.log('Firestore emulator attached!');
  }

  // only enable indexeddb if the firestore client hasn't been fully initialized
  if (!(firestore as any)._firestoreClient) {
    enableIndexedDbPersistence(firestore)
      .then(() => console.log('Persistence enabled!'))
      .catch((err) => console.error(err.message));
  }
  return firestore;
};

使用此getInitializedFirestore()函數替換對getFirestore()的任何調用。

這也是 HMR 和頁面刷新安全的，所以開發模式是愉快的並且不會拋出錯誤。 它還可以安全地部署到生產環境中，而無需接觸任何東西。

基本上，Firebase SDK 隱藏了判斷模擬器/持久性是否已啟用所需的屬性。 這只是稍微濫用了類型系統，所以我們可以訪問它們。

Answer 2

導致持久性調用返回 void 的原因有很多：

1. 與離線數據不兼容的版本，此功能未實現某些服務，例如 Node.js 我制作了您的案例的副本，我發現它與 Node.js 不兼容，因此驗證是否很重要兼容您的服務器firebase 啟用離線。 如果您打開多個選項卡也可能導致錯誤，一次只能在一個選項卡中啟用持久性。 當前瀏覽器不支持啟用持久性所需的所有資源。 對於 web，僅 Chrome、Safari 和 Firefox Z2567A5EC9305EB7AC2CZE8 瀏覽器支持離線持久化

2. 您正在進行異步調用，這是因為您正在制作 promise 所以第一次打印值結果是無效的，因為響應尚未到達。 但是，當 promise 收到信息時，它將不再無效。 有關如何工作的更多信息， 請參閱 promise 文檔。

3. 您沒有處理 promise，這可能會導致問題。 我做了一個復制，它引起了以下警告： UnhandledPromiseRejectionWarning: Unhandled promise 拒絕。 此錯誤源於在沒有 catch 塊的情況下拋出異步 function 內部，或拒絕未使用.catch() 處理的 promise firebase 啟用離線。

    firebase.firestore().enablePersistence()
      .catch((err) => {
          if (err.code == 'failed-precondition') {
              // Multiple tabs open, persistence can only be enabled
              // in one tab at a a time.
              // ...
          } else if (err.code == 'unimplemented') {
              // The current browser does not support all of the
              // features required to enable persistence
              // ...
          }
      });
    // Subsequent queries will use persistence, if it was enabled successfully

4. 您正在使用服務器端渲染，因此可能會導致錯誤修復，您必須使用 process.browser 作為示例進程瀏覽器。 我將此功能與 nextjs、node 和 vue 一起使用，並且可以正常工作。

    if (process.browser) {
      console.log('this code will only run on the browser')
    }

Cascade Operator我建議你打開另一個線程來檢查這個案例，因為它是另一個主題，以便更多人可以找到它。 但是，我找到了一個博客，其中解釋了如何將級聯運算符轉換為 JavaScript。 沒有等價物，但有辦法做到這一點。