Google 致力于为黑人社区推动种族平等。查看具体举措

详细了解 Web 和 Firebase

当您使用 Firebase 开发 Web 应用程序时,您可能会遇到不熟悉的概念,或者您需要更多信息来为您的项目做出正确决策的领域。此页面旨在回答这些问题或为您提供资源以了解更多信息。

如果您对本页未涵盖的主题有任何疑问,请访问我们的在线社区之一。我们还会定期使用新主题更新此页面,因此请回来查看我们是否添加了您想了解的主题。

SDK 版本 8 和 9

Firebase 为 Web 应用程序提供了两个 SDK 版本,其中之一目前处于测试阶段:

  • 版本 8。这是 Firebase 维护了几年的 JavaScript 界面,对于使用现有 Firebase 应用程序的 Web 开发人员来说很熟悉。
  • 模块化版本 9(测试版) 。此 SDK 引入了模块化方法,可通过WebpackRollup等现代 JavaScript 构建工具减少 SDK 大小并提高效率。

版本 9 与构建工具很好地集成,这些工具可以去除您的应用程序中未使用的代码,这一过程称为“摇树”。使用此 SDK 构建的应用程序可大大减少占用空间。版本 8 虽然作为模块提供,但没有严格的模块化结构,也没有提供相同程度的尺寸缩减。

尽管版本 9 SDK 的大部分遵循与版本 8 相同的模式,但代码的组织是不同的。通常,版本 8 面向命名空间和服务模式,而版本 9 面向离散功能。例如,版本8点的点链接,如firebaseApp.auth()由单个替换版本9 getAuth()函数,它接受firebaseApp和返回认证实例。

这意味着使用版本 8 或更早版本创建的 Web 应用程序需要重构才能利用版本 9 的模块化方法。 Firebase 提供了兼容库来简化这种转换;有关更多详细信息,请参阅升级指南

支持什么?

虽然第 8 版和第 9 版(测试版)具有不同的代码样式,但它们对 Firebase 功能和选项的支持非常相似。正如我们将在本指南中详细描述的那样,两个 SDK 版本都支持 JavaScript 和 Node.js 变体以及用于添加/安装 SDK 的几个选项。

添加 SDK 8.0(命名空间) 9.0(模块化测试版)
新产品经理
  • 对于 JavaScript
  • 对于 Node.js
  • 对于 JavaScript
  • 对于 Node.js
CDN(内容交付网络)
  • 对于 JavaScript
  • 对于 JavaScript
托管 URL
  • 对于 JavaScript
  • 对于 Node.js
  • 即将推出 JavaScript 和 Node.js

有关更多信息,请参阅本页后面的将 Web SDK 添加到您的应用程序Firebase Web SDK 变体的方法

新应用程序的第 9 版

如果您开始与 Firebase 进行新的集成,则可以在添加和初始化SDK 时选择加入第 9 版 Beta SDK

在开发应用程序时,请记住,您的代码将主要围绕函数组织。在版本 9 中,服务作为第一个参数传递,然后函数使用服务的详细信息来完成剩下的工作。例如:

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

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

有关更多示例和详细信息,请参阅每个产品领域的指南以及版本 9 参考文档

将 Web SDK 添加到您的应用程序的方法

Firebase 为大多数 Firebase 产品提供 JavaScript 库,包括远程配置、FCM 等。您如何将 Firebase SDK 添加到您的网络应用取决于您是否选择为您的应用使用 Firebase 托管、您在应用中使用的工具(如模块捆绑器),或者您的应用是否在非浏览器中运行Node.js 等环境。

您可以通过支持的方法之一将任何可用的库添加到您的应用程序:

  • npm(用于模块打包器和 Node.js)
  • CDN(内容分发网络)
  • Firebase 托管网址

有关每种方法的详细设置说明,请参阅将 Firebase 添加到您的 JavaScript 应用程序。本节的其余部分包含可帮助您从可用选项中进行选择的信息。

新产品经理

下载 Firebase npm 包(包括浏览器和 Node.js 包)可为您提供 Firebase SDK 的本地副本,非浏览器应用程序(例如 Node.js 应用程序、React Native 或 Electron)可能需要它。下载包括 Node.js 和 React Native 包,作为某些包的选项。 Node.js 包是 SSR 框架的服务器端渲染 (SSR) 步骤所必需的。

将 npm 与模块捆绑器(例如WebpackRollup)结合使用,可以提供优化选项以“摇动”未使用的代码并应用目标 polyfill,这可以大大减少应用程序的大小占用空间。实现这些功能可能会给您的配置和构建链增加一些复杂性,但各种主流 CLI 工具可以帮助缓解这种情况。这些工具包括AngularReactVueNext等。

总之:

  • 提供有价值的应用程序大小优化
  • 强大的工具可用于管理模块
  • 需要使用 Node.js 的 SSR

CDN(内容分发网络)

添加存储在 Firebase 的 CDN 上的库是一种简单的 SDK 设置方法,许多开发人员可能都很熟悉。使用 CDN 添加 SDK,您将不需要构建工具,并且与模块捆绑器相比,您的构建链可能更简单、更易于使用。如果您不是特别关心应用程序的安装大小并且没有特殊要求(例如从 TypeScript 转译),那么 CDN 可能是一个不错的选择。

总之:

  • 熟悉又简单
  • 当应用程序大小不是主要问题时适用
  • 适用于您的网站不使用构建工具的情况。

托管 URL

Firebase Hosting 提供了保留网址,让您可以通过加载来自同一来源的文件来提高性能。如果您已经在或计划在您的应用中使用 Firebase 托管,您可以通过托管 URL 添加 JavaScript SDK,并从这种性能提升中受益。此外,该方法支持 SDK 的自动初始化,可以简化开发、登台和生产等多种环境的管理。了解有关通过保留的托管 URL 添加 SDK 的更多信息。

总之:

  • 与 CDN 相比具有轻微的性能优势
  • 可以简化在多个开发环境中的工作
  • 方便已经在使用 Firebase 托管的应用

Firebase Web SDK 变体

目前,Firebase 提供两种 Web SDK 变体:

  • 支持在浏览器中使用的所有 Firebase 功能的 JavaScript 包。
  • 支持许多(但不是全部)Firebase 功能的客户端 Node.js 包。请参阅支持的环境列表。

这两个 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.8/firebase-app.js"></script>
    
    <script defer src="https://www.gstatic.com/firebasejs/8.6.8/firebase-auth.js"></script>
    <script defer src="https://www.gstatic.com/firebasejs/8.6.8/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 托管,您可能已经完成了以下几个步骤。

要为您的网络应用提供服务,您将使用 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 的示例代码。