按照本指南的說明,在您的網頁應用程式中使用 Firebase JavaScript SDK,或做為使用者存取的用戶端,例如在 Node.js 電腦或 IoT 應用程式中使用 Firebase JavaScript SDK。
步驟 1:建立 Firebase 專案並註冊應用程式
您需要先建立 Firebase 專案,並以該專案註冊應用程式,才能將 Firebase 新增到 JavaScript 應用程式。使用 Firebase 註冊應用程式時,您會取得 Firebase 設定物件,並用來連結應用程式與 Firebase 專案資源。
如要進一步瞭解 Firebase 專案,以及將應用程式加入專案的最佳做法,請參閱「瞭解 Firebase 專案」一文。
如果您沒有 JavaScript 專案,只是想試用 Firebase 產品,可以下載其中一個快速入門導覽課程範例。
步驟 2:安裝 SDK 並初始化 Firebase
本頁說明 Firebase JS SDK 模組化 API (使用 JavaScript 模組格式) 的設定操作說明。
這個工作流程會使用 npm,並需要使用模組套件器或 JavaScript 架構工具,因為模組套件 API 經過最佳化調整,可與模組組合器搭配運作,藉此消除未使用的程式碼 (樹狀結構搖動) 並縮減 SDK 大小。
透過 npm 安裝 Firebase:
npm install firebase
在應用程式中初始化 Firebase,並建立 Firebase 應用程式物件:
import { initializeApp } from 'firebase/app'; // TODO: Replace the following with your app's Firebase project configuration const firebaseConfig = { //... }; const app = initializeApp(firebaseConfig);
Firebase 應用程式是類似容器的物件,可儲存通用設定,並在各項 Firebase 服務之間共用驗證。在程式碼中初始化 Firebase 應用程式物件後,即可新增並開始使用 Firebase 服務。
如果您的應用程式包含以伺服器端轉譯 (SSR) 為基礎的動態功能,您將需要採取一些額外的步驟,確保設定在伺服器轉譯和用戶端算繪傳遞後持續存在。在伺服器邏輯中實作
FirebaseServerApp
介面,讓應用程式使用服務工作站最佳化工作階段管理。
步驟 3:在應用程式中存取 Firebase
您可以使用 Firebase 服務 (例如 Cloud Firestore、驗證、即時資料庫、遠端設定等) 匯入個別子套件。
以下範例說明如何使用 Cloud Firestore Lite SDK 擷取資料清單。
import { initializeApp } from 'firebase/app'; import { getFirestore, collection, getDocs } from 'firebase/firestore/lite'; // Follow this pattern to import other Firebase services // import { } from 'firebase/<service>'; // TODO: Replace the following with your app's Firebase project configuration const firebaseConfig = { //... }; const app = initializeApp(firebaseConfig); const db = getFirestore(app); // Get a list of cities from your database async function getCities(db) { const citiesCol = collection(db, 'cities'); const citySnapshot = await getDocs(citiesCol); const cityList = citySnapshot.docs.map(doc => doc.data()); return cityList; }
步驟 4:使用模組套件器 (webpack/Rollup) 縮減大小
Firebase Web SDK 可與模組組合器搭配運作,以移除任何未使用的程式碼 (樹狀結構搖動)。我們強烈建議您將這個方法用於正式版應用程式。Angular CLI、Next.js、Vue CLI 或 Create React App 等工具會自動為透過 npm 安裝並匯入程式碼集的程式庫,自動處理模組組合。
詳情請參閱「搭配使用模組套件與 Firebase」指南。
可用的 Firebase 網頁版服務
您現在已設定好使用 Firebase,可以開始在網頁應用程式中新增及使用以下任一可用的 Firebase 服務。
下列指令示範如何匯入使用 npm
安裝在本機的 Firebase 程式庫。如需替代匯入選項,請參閱可用程式庫說明文件。
後續步驟
瞭解 Firebase:
探索 Firebase 範例應用程式。
透過 Firebase 網路程式碼研究室累積實務經驗。
探索 GitHub 中的開放原始碼。
查看 Firebase JavaScript SDK 支援的環境。
使用其他 Firebase 維護的開放原始碼程式庫 (例如 AngularFire、RxFire 和 FirebaseUI for web),加速開發。
準備推出應用程式:
- 在 Google Cloud 控制台中,為專案設定預算快訊。
- 在 Firebase 控制台中監控「用量與計費」資訊主頁,掌握專案在多項 Firebase 服務中的整體用量。
- 詳閱 Firebase 推出檢查清單。