Firebase JS SDK 版本说明

请按照本指南中的说明，在您的 Web 应用中使用 Firebase JavaScript SDK，或者将其用作客户端以供最终用户访问（例如，在 Node.js 桌面应用或 IoT 应用中）。

第 1 步：创建 Firebase 项目并注册应用

您需要先创建一个 Firebase 项目，并在该项目中注册您的应用，然后才能将 Firebase 添加到您的 JavaScript 应用。在 Firebase 中注册应用后，您将获得一个 Firebase 配置对象，该对象可供您将应用与 Firebase 项目资源相关联。

如需详细了解 Firebase 项目以及将应用添加到项目的最佳做法，请访问了解 Firebase 项目。

创建 Firebase 项目

Firebase 或 Cloud 新用户

如果您是 Firebase 或 Google Cloud 的新用户，请按以下步骤操作。 如果您想创建一个全新的 Firebase 项目（以及其底层 Google Cloud 项目），也可以按照这些步骤操作。

  1. 登录 Firebase 控制台。
  2. 点击相应按钮以创建新的 Firebase 项目。
  3. 在文本字段中输入项目名称。

如果您是 Google Cloud 组织的成员，可以酌情选择在某个文件夹中创建项目（可选）。 4. 如果看到相关提示，请查看并接受 Firebase 条款，然后点击继续。 5. （可选）在 Firebase 控制台中启用 AI 辅助功能（称为“Gemini in Firebase”），可帮助您快速入门并简化开发流程。 6. （可选）为您的项目设置 Google Analytics，这样您在使用以下 Firebase 产品时可获得最佳体验：Firebase A/B Testing、Cloud Messaging、Crashlytics、In-App Messaging 和 Remote Config（包括个性化）。

您可以选择一个现有的 Google Analytics 账号，或者创建一个新账号。如果您创建新账号，请选择 Analytics 报告位置，然后接受项目的数据共享设置和 Google Analytics 条款。 7. 点击 Create project。

Firebase 会创建您的项目，预配一些初始资源，并启用重要 API。完成此过程后，您将进入 Firebase 控制台中该 Firebase 项目的概览页面。

现有 Cloud 项目

如果您想在现有 Google Cloud 项目中开始使用 Firebase，请按以下步骤操作。详细了解向现有 Google Cloud 项目“添加 Firebase”的方法，并排查相关问题。

  1. 使用拥有现有 Google Cloud 项目访问权限的账号登录 Firebase 控制台。
  2. 点击相应按钮以创建新的 Firebase 项目。
  3. 在页面底部，点击将 Firebase 添加到 Google Cloud 项目。
  4. 在文本字段中输入现有项目的项目名称，然后从显示的列表中选择该项目。
  5. 点击打开项目。
  6. 如果看到相关提示，请查看并接受 Firebase 条款，然后点击继续。
  7. （可选）在 Firebase 控制台中启用 AI 辅助功能（称为“Gemini in Firebase”），可帮助您快速入门并简化开发流程。
  8. （可选）为您的项目设置 Google Analytics，这样您在使用以下 Firebase 产品时可获得最佳体验：Firebase A/B Testing、Cloud Messaging、Crashlytics、In-App Messaging 和 Remote Config（包括个性化）。

您可以选择一个现有的 Google Analytics 账号，或者创建一个新账号。如果您创建新账号，请选择 Analytics 报告位置，然后接受项目的数据共享设置和 Google Analytics 条款。 9. 点击添加 Firebase。

Firebase 会将 Firebase 添加到现有项目。 完成此过程后，系统会将您带到 Firebase 控制台中该 Firebase 项目的概览页面。

注册您的应用

有了 Firebase 项目后，您就可以在该项目中注册自己的 Web 应用了。

  1. 在 Firebase 控制台的项目概览页面的中心位置，点击 Web 图标 () 以启动设置工作流。

如果您已向 Firebase 项目添加了应用，请点击添加应用以显示平台选项。 2. 输入应用的别名。 此别名是方便内部使用的标识符，只有您能在 Firebase 控制台中看到。 3. 点击注册应用。 4. 按照屏幕上的说明，在您的应用中添加和初始化 Firebase SDK。

在此使用入门页面的后续步骤中，您还可以找到有关添加、初始化和使用 Firebase SDK 的更详细说明。

如果您还没有 JavaScript 项目，只是想试用某一 Firebase 产品，可以下载我们的快速入门示例。

第 2 步：安装 SDK 并初始化 Firebase

本页面介绍 Firebase JS SDK 模块化 API（使用 JavaScript 模块格式）的设置说明。

此工作流使用 npm，并且需要模块打包器或 JavaScript 框架工具，因为模块化 API 经过了优化，可与模块打包器配合使用，以移除未使用的代码（摇树优化）并缩减 SDK 大小。

  1. 使用 npm 安装 Firebase：

npm install firebase 2. 在您的应用中，初始化 Firebase 并创建一个 Firebase 应用对象：

``` import { initializeApp } from 'firebase/app';

// TODO: Replace the following with your app's Firebase configuration const firebaseConfig = { //... };

const app = initializeApp(firebaseConfig); ```

Firebase 应用是一种类似于容器的对象，用于存储常见配置，并在各种 Firebase 服务之间共享身份验证凭据。在代码中初始化 Firebase 应用对象后，可以添加并开始使用 Firebase 服务。

如果您的应用包含基于服务器端渲染 (SSR) 的动态功能，则需要执行一些额外的步骤，以确保您的配置在服务器渲染和客户端渲染阶段保持不变。在服务器逻辑中，实现 FirebaseServerApp 接口，以利用 Service Worker 优化应用的会话管理。

第 3 步：在您的应用中访问 Firebase

您可以在各个子软件包中导入 Firebase 服务（如 Cloud Firestore、Authentication、Realtime Database、Remote Config 等）。

以下示例展示了如何使用 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 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 设计为可与模块打包器结合使用，用于移除任何未使用的代码（摇树优化）。对于正式版应用，我们强烈建议您使用此方法。对于通过 npm 安装并导入您的代码库的库，Angular CLI、Next.js、Vue CLI 或 Create React App 等工具会自动处理模块打包事宜。

如需了解详情，请参阅我们的将模块打包器与 Firebase 搭配使用指南。

面向 Web 的可用 Firebase 服务

现在，您已完成相应设置，可以使用 Firebase 了。接下来，您可以开始在 Web 应用中添加并使用以下任一可用的 Firebase 服务。

以下命令演示了如何导入使用 npm 在本地安装的 Firebase 库。如需了解其他导入选项，请参阅可用的库文档。

Firebase AI Logic 以前称为“Vertex AI in Firebase”，带有软件包 firebase/vertexai。

后续步骤

了解 Firebase：