Save the date - Google I/O returns May 18-20. Register to get the most out of the digital experience: Build your schedule, reserve space, participate in Q&As, earn Google Developer profile badges, and more. Register now

了解有關Web和Firebase的更多信息

在使用Firebase開發Web應用程序時,您可能會遇到不熟悉的概念,或者遇到需要更多信息來為項目做出正確決策的領域。該頁面旨在回答這些問題或為您提供更多信息的資源。

如果您對本頁未涵蓋的主題有疑問,請訪問我們的一個在線社區。我們還將定期用新主題更新此頁面,因此請返回查看是否添加了您想了解的主題。

SDK版本8和9

Firebase為Web應用程序提供了兩個SDK版本,其中一個當前處於Beta中:

  • 版本8。這是Firebase維護了幾年的JavaScript接口,對於使用現有Firebase應用程序的Web開發人員來說是熟悉的。
  • 模塊化版本9(Beta) 。此SDK引入了一種模塊化方法,可通過WebpackRollup等現代JavaScript構建工具來減小SDK的大小並提高效率。

版本9與構建工具很好地集成在一起,該構建工具可以刪除您的應用程序中未使用的代碼,該過程稱為“搖樹”。使用此SDK構建的應用程序可從尺寸上大大減少所受益。版本8儘管可以作為模塊使用,但它沒有嚴格的模塊化結構,並且無法提供相同程度的尺寸減小。

儘管大多數版本9 SDK遵循與版本8相同的模式,但是代碼的組織卻不同。通常,版本8面向名稱空間和服務模式,而版本9面向離散功能。例如,版本8的點鏈接,如firebaseApp.auth()由單個替換版本9 getAuth()函數,它接受firebaseApp和返回認證實例。

這意味著使用版本8或更早版本創建的Web應用程序需要進行重構,以利用版本9的模塊化方法。 Firebase提供了兼容庫來簡化這種過渡。有關更多詳細信息,請參見升級指南

支持什麼?

雖然版本8和版本9(Beta)具有不同的代碼樣式,但是它們為Firebase功能和選項提供了非常相似的支持。正如我們將在本指南中詳細描述的那樣,兩個SDK版本都支持JavaScript和Node.js變體,以及添加/安裝SDK的幾個選項。

使用以下方式添加SDK 8.0(命名空間) 9.0(模塊化Beta版)
npm
  • 對於JavaScript
  • 對於Node.js
  • 對於JavaScript
  • 對於Node.js
CDN(內容交付網絡)
  • 對於JavaScript
  • 即將推出JavaScript
託管網址
  • 對於JavaScript
  • 對於Node.js
  • 即將推出JavaScript和Node.js

有關更多信息,請參閱本頁後面的將Web SDK添加到您的應用的方法Firebase Web SDK變體

新應用的版本9

如果您要開始與Firebase進行新的集成,則可以在添加和初始化SDK時選擇使用版本9 Beta SDK

在開發應用程序時,請記住,您的代碼將主要圍繞function進行組織。在版本9中,將服務作為第一個參數傳遞,然後函數使用服務的詳細信息來完成其餘的工作。例如:

import { getAuth, onAuthStateChanged } from "firebase/auth";

const auth = getAuth(firebaseApp);
onAuthStateChanged(auth, user => {
  // Check for user status
});

有關更多示例和詳細信息,請參見每個產品領域的指南以及版本9參考文檔

將Web SDK添加到您的應用程序的方法

Firebase為大多數Firebase產品提供JavaScript庫,包括Remote Config,FCM等。如何將Firebase SDK添加到Web應用程序取決於您是否選擇為應用程序使用Firebase託管,與應用程序一起使用的工具(例如模塊捆綁程序),或者您的應用程序是否在非瀏覽器中運行環境,例如Node.js。

您可以通過一種受支持的方法將任何可用的庫添加到您的應用程序:

  • npm(用於模塊捆綁器和Node.js)
  • CDN(內容交付網絡)
  • Firebase託管URL

有關每種方法的詳細設置說明,請參閱將Firebase添加到您的JavaScript應用。本節的其餘部分包含可幫助您從可用選項中進行選擇的信息。

npm

下載Firebase npm軟件包(包括瀏覽器和Node.js捆綁包)會為您提供Firebase SDK的本地副本,非瀏覽器應用程序(例如Node.js應用程序,React Native或Electron)可能需要Firebase SDK的本地副本。該下載包含Node.js和React Native捆綁包,作為某些軟件包的選項。對於SSR框架的服務器端呈現(SSR)步驟,Node.js包是必需的。

將npm與模塊打包程序(例如WebpackRollup)一起使用可提供優化選項,以“搖動”未使用的代碼並應用目標的polyfill,這可以大大減少應用程序的尺寸。實施這些功能可能會給您的配置和構建鏈增加一些複雜性,但是各種主流的CLI工具可以幫助減輕這種情況。這些工具包括AngularReactVueNext等。

總之:

  • 提供有價值的應用程序大小優化
  • 強大的工具可用於管理模塊
  • 使用Node.js進行SSR必需

CDN(內容交付網絡)

添加存儲在Firebase CDN上的庫是一種簡單的SDK設置方法,許多開發人員可能都很熟悉。使用CDN添加SDK時,您將不需要構建工具,並且與模塊捆綁器相比,構建鏈可能更容易使用。如果您不特別擔心應用程序的安裝大小,並且沒有特殊要求(例如從TypeScript進行編譯),那麼CDN可能是一個不錯的選擇。

總之:

  • 熟悉而簡單
  • 當應用程序大小不是主要問題時適當
  • 適用於您的網站不使用構建工具的情況。

託管網址

Firebase託管提供了保留的URL,通過加載來自相同來源的文件,您可以提高性能。如果您已經在應用程序中使用或計劃使用Firebase託管,則可以通過託管URL添加JavaScript SDK,並從此性能提升中受益。此外,此方法支持SDK的自動初始化,從而可以簡化對多個環境(例如開發,登台和生產)的管理。了解有關通過保留的主機URL添加SDK的更多信息。

總之:

  • 與CDN相比,性能略有優勢
  • 可以簡化在多個開發環境中的工作
  • 方便已使用Firebase託管的應用程序

Firebase Web SDK變體

當前,Firebase提供了兩個Web SDK變體:

  • 一個JavaScript捆綁包,支持在瀏覽器中使用的所有Firebase功能。
  • 客戶端Node.js捆綁軟件支持許多(但不是全部)Firebase功能。請參閱支持的環境列表。

這兩個SDK變體都旨在幫助構建Web應用程序或客戶端應用程序以供最終用戶訪問,例如在Node.js桌面或IoT應用程序中。如果您的目標是從特權環境(例如服務器)設置管理訪問權限,請使用Firebase Admin SDK

使用捆綁器和框架進行環境檢測

使用npm安裝Firebase Web SDK時,將同時安裝JavaScript和Node.js版本。該軟件包提供了詳細的環境檢測功能,以為您的應用程序啟用正確的捆綁軟件。

如果您的代碼使用Node.js require語句,則SDK會找到特定於Node的捆綁包。否則,必須正確確定捆綁程序的設置,以檢測package.json文件中的正確入口點字段(例如mainbrowsermodule )。如果您在使用SDK時遇到運行時錯誤,請檢查以確保將捆綁程序配置為根據您的環境確定正確的捆綁類型。

可用庫

其他設置選項

延遲加載Firebase SDK(來自CDN)

您可以延遲Firebase SDK的包含,直到整個頁面加載完畢。

  1. 為Firebase SDK的每個script標籤添加一個defer標誌,然後使用第二個腳本來延遲Firebase的初始化,例如:

    <script defer src="https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js"></script>
    
    <script defer src="https://www.gstatic.com/firebasejs/8.6.1/firebase-auth.js"></script>
    <script defer src="https://www.gstatic.com/firebasejs/8.6.1/firebase-firestore.js"></script>
    
    // ...
    
    <script defer src="./init-firebase.js"></script>
    
  2. 創建一個init-firebase.js文件,然後在文件中包含以下內容:

    // TODO: Replace the following with your app's Firebase project configuration
    var firebaseConfig = {
      // ...
    };
    
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    

在單個應用程序中使用多個Firebase項目

在大多數情況下,您只需要在一個默認應用程序中初始化Firebase。您可以通過兩種等效的方式從該應用訪問Firebase:

// Initialize Firebase with a "default" Firebase project
var defaultProject = firebase.initializeApp(firebaseConfig);

console.log(defaultProject.name);  // "[DEFAULT]"

// Option 1: Access Firebase services via the defaultProject variable
var defaultStorage = defaultProject.storage();
var defaultFirestore = defaultProject.firestore();

// Option 2: Access Firebase services using shorthand notation
defaultStorage = firebase.storage();
defaultFirestore = firebase.firestore();

但是,有時您需要同時訪問多個Firebase項目。例如,您可能想從一個Firebase項目的數據庫中讀取數據,但將文件存儲在另一個Firebase項目中。或者,您可能想對一個項目進行身份驗證,而使第二個項目未經身份驗證。

Firebase JavaScript SDK允許您在一個應用程序中同時初始化和使用多個Firebase項目,每個項目都使用自己的Firebase配置信息。

// Initialize Firebase with a default Firebase project
firebase.initializeApp(firebaseConfig);

// Initialize Firebase with a second Firebase project
var otherProject = firebase.initializeApp(otherProjectFirebaseConfig, "other");

console.log(firebase.app().name);  // "[DEFAULT]"
console.log(otherProject.name);    // "otherProject"

// Use the shorthand notation to access the default project's Firebase services
var defaultStorage = firebase.storage();
var defaultFirestore = firebase.firestore();

// Use the otherProject variable to access the second project's Firebase services
var otherStorage = otherProject.storage();
var otherFirestore = otherProject.firestore();

運行本地Web服務器進行開發

如果您要構建Web應用程序,則Firebase JavaScript SDK的某些部分要求您從服務器而不是本地文件系統提供Web應用程序。您可以使用Firebase CLI運行本地服務器。

如果您已經為您的應用設置了Firebase Hosting,則可能已經完成了以下幾個步驟。

要提供您的Web應用程序,您將使用命令行工具Firebase CLI。

  1. 請訪問Firebase CLI文檔,以了解如何安裝CLI更新至最新版本

  2. 初始化您的Firebase項目。從本地應用程序目錄的根目錄運行以下命令:

    firebase init

  3. 啟動本地服務器進行開發。從本地應用程序目錄的根目錄運行以下命令:

    firebase serve

Firebase JavaScript SDK的開源資源

Firebase支持開源開發,我們鼓勵社區做出貢獻和反饋。

Firebase JavaScript SDK

大多數Firebase JavaScript SDK在我們的公共Firebase GitHub存儲庫中被開發為開源庫。

快速入門樣本

Firebase維護了Web上大多數Firebase API的快速入門示例集合。在我們的公共Firebase GitHub快速入門存儲庫中找到這些快速入門。您可以將這些快速入門用作使用Firebase SDK的示例代碼。