瞭解網頁版 Firebase

使用 Firebase 開發網頁應用程式時，您可能會遇到陌生的概念或需要更多資訊，才能為專案做出正確決策。本資訊頁面旨在回答這些問題，或提供更詳盡的資源。

如果您對這個頁面未涵蓋的主題有任何疑問，請造訪我們的線上社群。我們也會定期更新這個網頁，提供新的主題，因此請隨時回來查看我們是否加入了您想瞭解的主題。

SDK 版本：命名空間和模組化

Firebase 提供兩種網頁應用程式適用的 API 介面：

  • JavaScript - 命名空間。這是 Firebase 持續維護多年的 JavaScript 介面，對於擁有舊版 Firebase 應用程式的網頁開發人員也十分熟悉。命名空間 API 並不會因持續支援新功能而受益，因此大部分的新應用程式都應改用模組化 API。
  • JavaScript - 模組化。這個 SDK 是以模組化方法為基礎，使用 webpack 或 Rollup 等新型 JavaScript 建構工具，能縮減 SDK 大小並增進效率。

模組化 API 與建構工具完美整合，可去除應用程式中未使用的程式碼，此程序稱為「樹木搖晃」。透過此 SDK 建構的應用程式可受益於大幅縮減大小。命名空間 API (可做為模組使用) 並沒有完全模組的結構，也不會提供相同程度的縮減程度。

雖然大部分的模組化 API 採用的模式與命名空間 API 相同，但程式碼的結構並不同。一般來說，命名空間 API 採用的命名空間與服務模式，而模組化 API 則專向取向離散函式。舉例來說，在模組化 API 中，命名空間 API 的點鏈 (例如 firebaseApp.auth()) 會替換為採用 firebaseApp 並傳回驗證執行個體的單一 getAuth() 函式。

這表示使用命名空間 API 建立的網頁應用程式需要重構，才能使用模組化應用程式設計。詳情請參閱升級指南。

JavaScript - 適用於新應用程式的模組化 API

如要開始進行新的 Firebase 整合，可以在新增及初始化 SDK 時選擇啟用模組 API。

開發應用程式時，請注意您的程式碼主要是根據「函式」分門別類。在模組化 API 中，服務是以第一個引數的形式傳遞，然後函式會使用服務的詳細資料完成其餘作業。例如：

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

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

如需更多範例和詳細資料，請參閱各產品領域的指南以及模組 API 參考說明文件。

將 Web SDK 新增至應用程式的方法

Firebase 為大多數 Firebase 產品 (包括遠端設定、FCM 等) 提供 JavaScript 程式庫。將 Firebase SDK 新增至網頁應用程式的方式，取決於您用於應用程式所用的工具 (例如模組套件)。

您可以使用其中一種支援方法，將任何可用程式庫新增至應用程式：

  • npm (適用於模組套件工具)
  • CDN (內容傳遞聯播網)

如需詳細的設定操作說明，請參閱「將 Firebase 新增至 JavaScript 應用程式」。本節的其餘部分包含可協助您選擇可用選項的資訊。

npm

只要下載 Firebase npm 套件 (包括瀏覽器和 Node.js 套件)，就能取得 Firebase SDK 的本機副本，但 Node.js 應用程式、React Native 或 Electron 等非瀏覽器的應用程式可能需要這個副本。下載內容包含 Node.js 和 React Native 套件，做為部分套件的選項。SSR 架構的伺服器端轉譯 (SSR) 步驟需要 Node.js 套件。

將 npm 與 webpack 或 Rollup 等模組套件搭配使用，則能提供最佳化選項，以便「樹狀圖」未使用的程式碼，並套用指定 polyfill，進而大幅減少應用程式的大小。實作這些功能可能會增加設定和建構鏈方面的複雜度，但各種主要 CLI 工具可減輕此問題。這些工具包括 Angular、React、Vue、Next 等。

簡單來說：

  • 提供寶貴的應用程式大小最佳化功能
  • 使用強大的工具管理模組
  • 使用 Node.js 的 SSR 需要

CDN (內容傳遞聯播網)

新增儲存在 Firebase CDN 上的程式庫是簡單的 SDK 設定方法，可能許多開發人員可能都很熟悉。使用 CDN 新增 SDK 將不需要建構工具，且與模組組合器相比，建構鏈結可能簡單也更容易。如果您擔心應用程式的安裝大小，也沒有特殊要求 (例如從 TypeScript 傳輸)，則 CDN 可能就是最佳選擇。

簡單來說：

  • 熟悉簡單好用的功能
  • 適用於應用程式大小不是主要考量時
  • 適用於網站未使用建構工具的情況。

Firebase Web SDK 變化版本

Firebase 的 Web SDK 可同時用於瀏覽器和節點應用程式。不過，節點環境並未提供多項產品，請參閱支援的環境清單。

部分產品 SDK 會提供獨立的瀏覽器和節點變化版本，每種都以 ESM 和 CJS 格式提供，有些產品 SDK 甚至會提供 Cordova 或 React Native 變化版本。Web SDK 已設為根據您的工具設定或環境提供正確的變化版本，在大多數情況下都不需要手動選取。所有 SDK 變化版本的設計都是為了協助建構網頁應用程式或用戶端應用程式，以便使用者存取，例如在 Node.js 電腦或 IoT 應用程式中。如果您的目標是從特殊權限環境 (例如伺服器) 設定管理員權限，請改用 Firebase Admin SDK。

利用套件與架構進行環境偵測

使用 npm 安裝 Firebase Web SDK 時，系統會同時安裝 JavaScript 和 Node.js 版本。套件提供詳細的環境偵測功能，為應用程式啟用合適的套件。

如果您的程式碼使用 Node.js require 陳述式，SDK 會尋找節點專用的套件。否則，請務必正確調整 Bundler 設定，以偵測 package.json 檔案中的正確的進入點欄位 (例如 main、browser 或 module)。如果 SDK 發生執行階段錯誤，請確認 Bundler 已設定為優先針對環境設定正確的套件類型。

瞭解 Firebase 設定物件

如要在應用程式中初始化 Firebase，您必須提供應用程式的 Firebase 專案設定。您可以隨時取得您的 Firebase 設定物件。

  • 我們不建議您手動編輯設定物件，尤其是下列必要的「Firebase 選項」：apiKey、projectId 和 appID。如果您初始化應用程式，但是這些必要的「Firebase 選項」值無效或缺少值，應用程式使用者可能會遇到嚴重問題。authDomain 是例外情況，可以按照使用 signInWithRedirect 的最佳做法更新。

  • 如果已在 Firebase 專案中啟用 Google Analytics (分析)，設定物件會包含 measurementId 欄位。如要進一步瞭解這個欄位，請參閱 Analytics (分析) 入門指南頁面。

  • 如果您在建立 Firebase 網頁應用程式「之後」才啟用 Google Analytics (分析) 或即時資料庫，請務必將您在應用程式中使用的 Firebase 設定物件更新為相關聯的設定值 (分別為 measurementId 和 databaseURL)。您可以隨時取得您的 Firebase 設定物件。

以下是已啟用所有服務的設定物件格式 (這些值會自動填入)：

var firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  // The value of `databaseURL` depends on the location of the database
  databaseURL: "https://DATABASE_NAME.firebaseio.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
  measurementId: "G-MEASUREMENT_ID",
};

可用的程式庫

其他設定選項

延遲載入 Firebase SDK (從 CDN)

您可以延後整個頁面載入 Firebase SDK。如果您將模組化 API CDN 指令碼與 <script type="module"> 搭配使用，此為預設行為。如果您要將命名空間 CDN 指令碼做為模組使用，請完成下列步驟來延遲載入：

  1. 為 Firebase SDK 的每個 script 標記加上 defer 標記，然後使用第二個指令碼延後 Firebase 的初始化作業，例如：

    <script defer src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>

<script defer src="https://www.gstatic.com/firebasejs/8.10.1/firebase-auth.js"></script>
<script defer src="https://www.gstatic.com/firebasejs/8.10.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，方法有以下兩種：

網路模組 API

import { initializeApp } from "firebase/app";
import { getStorage } from "firebase/storage";
import { getFirestore } from "firebase/firestore";

// Initialize Firebase with a "default" Firebase project
const defaultProject = initializeApp(firebaseConfig);

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

// Option 1: Access Firebase services via the defaultProject variable
let defaultStorage = getStorage(defaultProject);
let defaultFirestore = getFirestore(defaultProject);

// Option 2: Access Firebase services using shorthand notation
defaultStorage = getStorage();
defaultFirestore = getFirestore();
app_default_init_options.js

網路命名空間 API

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

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

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

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

但在某些情況下，您會需要同時存取多個 Firebase 專案。例如，您可能想要讀取某個 Firebase 專案的資料庫中的資料，但將檔案儲存在不同的 Firebase 專案中。或者，您可能想要驗證一項專案，同時保留第二個專案未經驗證。

Firebase JavaScript SDK 可讓您在單一應用程式中同時初始化及使用多個 Firebase 專案，且每個專案都有自己的 Firebase 設定資訊。

網路模組 API

import { initializeApp, getApp } from "firebase/app";
import { getStorage } from "firebase/storage";
import { getFirestore } from "firebase/firestore";

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

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

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

// Use the shorthand notation to access the default project's Firebase services
const defaultStorage = getStorage();
const defaultFirestore = getFirestore();

// Use the otherProject variable to access the second project's Firebase services
const otherStorage = getStorage(otherProject);
const otherFirestore = getFirestore(otherProject);
app_multi_project_init_options.js

網路命名空間 API

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

// Initialize Firebase with a second Firebase project
const 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
const defaultStorage = firebase.storage();
const defaultFirestore = firebase.firestore();

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

執行開發用本機網路伺服器

如要建構網頁應用程式，Firebase JavaScript SDK 的某些部分會要求您透過伺服器提供網頁應用程式，而非透過本機檔案系統。您可以使用 Firebase CLI 執行本機伺服器。

如果您已為應用程式設定 Firebase 託管，您可能已完成下列幾個步驟。

如要提供網頁應用程式，請使用 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 會保留一系列網路上大多數 Firebase API 的快速入門導覽課程範例。在公開的 Firebase GitHub 快速入門導覽課程存放區中找到這些快速入門導覽課程。您可以使用這些快速入門導覽課程做為程式碼範例，藉此使用 Firebase SDK。