請遵循本指南，以在您的Web應用程序中或作為客戶端（例如，在Node.js桌面或IoT應用程序中）作為最終用戶訪問的客戶端使用Firebase JavaScript SDK。
先決條件
安裝您的首選編輯器或IDE。
使用您的Google帳戶登錄Firebase 。
如果您還沒有JavaScript項目，而只想試用Firebase產品，則可以下載我們的快速入門示例之一。
步驟1 ：建立Firebase專案
在將Firebase添加到JavaScript應用之前，您需要創建一個Firebase項目以連接到您的應用。
訪問“了解Firebase項目”以了解有關Firebase項目以及向項目添加應用程序的最佳做法的更多信息。
第2步：在Firebase中註冊您的應用
在擁有Firebase項目之後，可以將Web應用程序添加到其中。
請訪問了解Firebase項目，以了解有關向Firebase項目添加應用程序的最佳實踐和注意事項的更多信息。
在Firebase控制台的項目概述頁面的中心，單擊Web圖標（ ）以啟動設置工作流程。
如果您已經將應用程序添加到Firebase項目中，請單擊“添加應用程序”以顯示平台選項。
輸入應用程序的暱稱。
此暱稱是內部便利標識符，僅在Firebase控制台中對您可見。（可選）為您的Web應用設置Firebase Hosting。
點擊註冊應用。
第3步：添加Firebase SDK並初始化Firebase
Firebase為大多數Firebase產品提供JavaScript庫，包括Remote Config，FCM等。您可以將任何可用的庫添加到您的應用程序。
如何將Firebase SDK添加到Web應用程序取決於您是否選擇為應用程序使用Firebase託管，與應用程序一起使用的工具（例如模塊捆綁器）或是否配置了Node.js。應用程序。有關在這些替代方法之間進行選擇的更多幫助，請參閱將Web SDK添加到您的應用程序的方法。
如果您有興趣試用針對模塊化應用開發進行了優化的新Beta SDK ，請選擇版本9（測試版）的選項。請記住，測試版中沒有技術支持義務。
與npm
您可以配置Firebase JavaScript SDK的部分導入，並且僅加載所需的Firebase產品。如果您使用捆綁器（如Browserify或webpack），則可以在需要時import單個Firebase產品。
安裝Firebase JavaScript SDK：
如果您還沒有
package.json文件，請通過從JavaScript項目的根目錄運行以下命令來創建一個文件：npm init
安裝
firebasenpm軟件包並通過運行將其保存到package.json文件中：npm install --save firebase
要僅包括特定的Firebase產品（例如身份驗證和Cloud Firestore），請
importFirebase模塊：// Firebase App (the core Firebase SDK) is always required and must be listed first import firebase from "firebase/app"; // If you are using v7 or any earlier version of the JS SDK, you should import firebase using namespace import // import * as firebase from "firebase/app" // If you enabled Analytics in your project, add the Firebase SDK for Analytics import "firebase/analytics"; // Add the Firebase products that you want to use import "firebase/auth"; import "firebase/firestore";在您的應用中初始化Firebase：
// TODO: Replace the following with your app's Firebase project configuration // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field const firebaseConfig = { // ... }; // Initialize Firebase firebase.initializeApp(firebaseConfig);
從CDN
您可以配置Firebase JavaScript SDK的部分導入，並且僅加載所需的Firebase產品。 Firebase將Firebase JavaScript SDK的每個庫存儲在我們的全局CDN（內容交付網絡）上。
要僅包括特定的Firebase產品（例如Authentication和Cloud Firestore），請在您的
<body>標籤底部添加以下腳本，但是在使用任何Firebase服務之前：<body> <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services --> <!-- Firebase App (the core Firebase SDK) is always required and must be listed first --> <script src="https://www.gstatic.com/firebasejs/8.5.0/firebase-app.js"></script> <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics --> <script src="https://www.gstatic.com/firebasejs/8.5.0/firebase-analytics.js"></script> <!-- Add Firebase products that you want to use --> <script src="https://www.gstatic.com/firebasejs/8.5.0/firebase-auth.js"></script> <script src="https://www.gstatic.com/firebasejs/8.5.0/firebase-firestore.js"></script> </body>在您的應用中初始化Firebase：
<body> <!-- Previously loaded Firebase SDKs --> <script> // TODO: Replace the following with your app's Firebase project configuration // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field var firebaseConfig = { // ... }; // Initialize Firebase firebase.initializeApp(firebaseConfig); </script> </body>
從託管URL
使用Firebase託管時，可以配置您的應用程序以從保留的URL動態加載Firebase JavaScript SDK庫。了解有關通過保留的主機URL添加SDK的更多信息。
使用此設置選項，在部署到Firebase之後，您的應用程序會自動從您部署到的Firebase項目中提取Firebase配置對象。您可以將同一代碼庫部署到多個Firebase項目，但不必跟踪用於firebase.initializeApp()的Firebase配置。
此設置選項還可以用於在本地測試您的Web應用程序。
要僅包括特定的Firebase產品（例如，Analytics（分析），Authentication（身份驗證）或Cloud Firestore），請將以下腳本添加到
<body>標籤的底部，但要使用任何Firebase服務：<body> <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services --> <!-- Firebase App (the core Firebase SDK) is always required and must be listed first --> <script src="/__/firebase/8.5.0/firebase-app.js"></script> <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics --> <script src="/__/firebase/8.5.0/firebase-analytics.js"></script> <!-- Add Firebase products that you want to use --> <script src="/__/firebase/8.5.0/firebase-auth.js"></script> <script src="/__/firebase/8.5.0/firebase-firestore.js"></script> </body>在您的應用中初始化Firebase（使用保留的託管網址時無需包括Firebase配置對象）：
<body> <!-- Previously loaded Firebase SDKs --> <!-- Initialize Firebase --> <script src="/__/firebase/init.js"></script> </body>
Node.js應用
安裝Firebase JavaScript SDK：
如果您還沒有
package.json文件，請通過從JavaScript項目的根目錄運行以下命令來創建一個文件：npm init
安裝
firebasenpm軟件包並通過運行將其保存到package.json文件中：npm install --save firebase
使用以下選項之一在您的應用程序中使用Firebase模塊：
您可以
require任何JavaScript文件中的模塊要僅包括特定的Firebase產品（例如身份驗證和Cloud Firestore），請執行以下操作：
// Firebase App (the core Firebase SDK) is always required and // must be listed before other Firebase SDKs var firebase = require("firebase/app"); // Add the Firebase products that you want to use require("firebase/auth"); require("firebase/firestore");您可以使用ES2015
import模塊要僅包括特定的Firebase產品（例如身份驗證和Cloud Firestore），請執行以下操作：
// Firebase App (the core Firebase SDK) is always required and // must be listed before other Firebase SDKs import firebase from "firebase/app"; // Add the Firebase services that you want to use import "firebase/auth"; import "firebase/firestore";
在您的應用中初始化Firebase：
// TODO: Replace the following with your app's Firebase project configuration // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field var firebaseConfig = { // ... }; // Initialize Firebase firebase.initializeApp(firebaseConfig);
了解有關Firebase配置對象的信息
要在您的應用程序中初始化Firebase，您需要提供應用程序的Firebase項目配置。您可以隨時獲取Firebase配置對象。
如果您使用保留的Hosting URL ，則Firebase配置將自動從Firebase項目中拉出，因此您無需在代碼中顯式提供配置對象。
我們不建議手動編輯配置對象，尤其是以下必需的“ Firebase選項”：
apiKey，projectId和appID。如果您為這些必需的“ Firebase選項”使用無效或缺少的值初始化應用程序，則應用程序的用戶可能會遇到嚴重問題。如果您在Firebase項目中啟用了Google Analytics（分析），則配置對象包含字段
measurementId。在Analytics（分析）入門頁面上了解有關此字段的更多信息。
這是啟用了所有服務的配置對象的格式（這些值會自動填充）：
// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
var firebaseConfig = {
apiKey: "API_KEY",
authDomain: "PROJECT_ID.firebaseapp.com",
databaseURL: "https://PROJECT_ID.firebaseio.com",
projectId: "PROJECT_ID",
storageBucket: "PROJECT_ID.appspot.com",
messagingSenderId: "SENDER_ID",
appId: "APP_ID",
measurementId: "G-MEASUREMENT_ID",
};
這是一個帶有示例值的配置對象：
// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
var firebaseConfig = {
apiKey: "AIzaSyDOCAbC123dEf456GhI789jKl01-MnO",
authDomain: "myapp-project-123.firebaseapp.com",
databaseURL: "https://myapp-project-123.firebaseio.com",
projectId: "myapp-project-123",
storageBucket: "myapp-project-123.appspot.com",
messagingSenderId: "65211879809",
appId: "1:65211879909:web:3ae38ef1cdcb2e01fe5f0c",
measurementId: "G-8GSGZQ44ST"
};
步驟4 ：（可選）安裝CLI並部署到Firebase Hosting
如果您將Firebase Web App與Firebase託管站點鏈接，則可以立即（在設置Web App時）或以後的任何時間部署站點的內容和配置。
要部署到Firebase，您將使用命令行工具Firebase CLI。
初始化您的Firebase項目。從本地應用程序目錄的根目錄運行以下命令：
firebase init
將您的本地應用目錄鏈接到Firebase
生成
firebase.json文件（Firebase託管所需的文件）提示您指定一個公共根目錄，其中包含您的公共靜態文件（HTML，CSS，JS等）
Firebase查找的目錄的默認名稱是“ public”。您還可以稍後通過直接修改
firebase.json文件來設置公共目錄。
將您的內容和託管配置部署到Firebase託管。
默認託管網站
默認情況下，所有的火力地堡計劃對免費的子域
web.app和firebaseapp.com域（PROJECT_ID .web.app和PROJECT_ID .firebaseapp.com）。部署到您的站點。從應用程序的根目錄運行以下命令：
firebase deploy
在兩個默認站點中查看您的站點：
-
PROJECT_ID .web.app -
PROJECT_ID .firebaseapp.com
-
非默認託管站點
Firebase項目支持多個站點（這些站點被視為您的非默認站點）。您可以在控制台的Web App設置工作流程中或從控制台的“託管”頁面將其他網站添加到項目中。
將您的網站添加到
firebase.json文件（該文件是在firebase init期間創建的）。請注意，此
firebase.json配置假定您為每個站點都有單獨的存儲庫。{ "hosting": { "site": "SITE_ID", "public": "public", // ... } }部署到您的站點。從應用程序的根目錄運行以下命令：
firebase deploy --only hosting:SITE_ID
在以下任一位置查看您的網站：
-
SITE_ID .web.app -
SITE_ID .firebaseapp.com
-
第5步：在您的應用中訪問Firebase
Firebase JavaScript SDK支持以下Firebase產品。每個產品都是可選的，可以如圖所示進行訪問。
在Firebase JavaScript參考文檔中了解可用的方法。
| 火力地堡產品 | 命名空間（v8及更低版本） | 網頁 | Node.js |
|---|---|---|---|
| 分析工具 | firebase.analytics() | ||
| 驗證 | firebase.auth() | ||
| 雲消防站 | firebase.firestore() | ||
| Firebase Client SDK的雲功能 | firebase.functions() | ||
| 雲消息傳遞 | firebase.messaging() | ||
| 雲儲存 | firebase.storage() | ||
| 性能監控（測試版） | firebase.performance() | ||
| 實時數據庫 | firebase.database() | ||
| 遠程配置（測試版） | firebase.remoteConfig() |
可用庫
下一步
了解有關Firebase的信息：
獲得Firebase Web Codelab的動手經驗。
探索GitHub中的開源代碼。
查看Firebase JavaScript SDK支持的環境。
使用其他Firebase維護的開源庫（例如AngularFire ， RxFire和FirebaseUI for web）來加快開發速度。
準備啟動您的應用程序：
- 在Google Cloud Console中為您的項目設置預算警報。
- 在Firebase控制台中監控“使用情況”和“計費”儀表板，以全面了解項目在多個Firebase服務中的使用情況。
- 查看Firebase啟動核對錶。
將Firebase服務添加到您的應用程序：
使用Firebase Hosting託管您的應用程序。
使用Authentication設置用戶身份驗證流程。
使用Cloud Firestore或實時數據庫存儲數據，例如用戶信息。
使用Cloud Storage存儲文件，例如照片和視頻。
通過Performance Monitoring深入了解您應用的性能問題。
使用Cloud Functions觸發在安全環境中運行的後端代碼。
使用Cloud Messaging發送通知。