Общие сведения о Firebase для Интернета

При разработке веб-приложения с использованием Firebase вы можете столкнуться с незнакомыми концепциями или областями, где вам потребуется дополнительная информация для принятия правильных решений по вашему проекту. Эта страница призвана ответить на эти вопросы или указать на ресурсы для получения дополнительной информации.

Если у вас есть вопросы по теме, не освещенной на этой странице, посетите одно из наших онлайн-сообществ . Мы также будем периодически обновлять эту страницу новыми темами, поэтому заглядывайте сюда, чтобы узнать, не добавили ли мы интересующую вас тему.

Версии SDK: с пространством имен и модульный

Firebase предоставляет два API-интерфейса для веб-приложений:

  • JavaScript — с пространствами имен. Это интерфейс JavaScript, который Firebase поддерживала на протяжении многих лет и который знаком веб-разработчикам, работающим со старыми приложениями Firebase. Поскольку API с пространствами имен не получает преимуществ от постоянной поддержки новых функций, большинству новых приложений следует вместо этого использовать модульный API.
  • JavaScript — модульный . Этот SDK основан на модульном подходе, который обеспечивает уменьшенный размер SDK и большую эффективность при работе с современными инструментами сборки JavaScript, такими как webpack или Rollup .

Модульный API хорошо интегрируется с инструментами сборки, которые удаляют неиспользуемый код из вашего приложения — процесс, известный как «tree-shaking». Приложения, созданные с помощью этого SDK, выигрывают от значительного уменьшения размера. API с пространствами имен, хотя и доступен в виде модуля, не имеет строго модульной структуры и не обеспечивает такой же степени уменьшения размера.

Though the majority of the modular API follows the same patterns as the namespaced API, the organization of the code is different. Generally, the namespaced API is oriented towards a namespace and service pattern, while the modular API is oriented toward discrete functions. For example, the namespaced API's dot-chaining, such as firebaseApp.auth() , is replaced in the modular API by a single getAuth() function that takes firebaseApp and returns an Authentication instance.

Это означает, что веб-приложения, созданные с использованием API с пространствами имен, требуют рефакторинга для того, чтобы воспользоваться преимуществами модульной архитектуры приложений. Дополнительные сведения см. в руководстве по обновлению .

JavaScript — модульный API для новых приложений

Если вы начинаете новую интеграцию с Firebase, вы можете подключить модульный API при добавлении и инициализации SDK .

При разработке приложения помните, что ваш код будет организован в основном вокруг функций . В модульном API сервисы передаются в качестве первого аргумента, а затем функция использует данные сервиса для выполнения остальных действий. Например:

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

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

Дополнительные примеры и подробности см. в руководствах по каждой продуктовой области, а также в модульной справочной документации по API .

Способы добавления веб-SDK в ваше приложение

Firebase предоставляет библиотеки JavaScript для большинства продуктов Firebase, включая Remote Config , FCM и другие. Способ добавления SDK Firebase в ваше веб-приложение зависит от того, какие инструменты вы используете в своем приложении (например, сборщик модулей).

Вы можете добавить любую из доступных библиотек в свое приложение одним из поддерживаемых способов:

  • npm (для сборщиков модулей)
  • CDN (сеть доставки контента)

Подробные инструкции по настройке см. в разделе «Добавление Firebase в ваше JavaScript-приложение» . Остальная часть этого раздела содержит информацию, которая поможет вам выбрать подходящий вариант.

npm

Downloading the Firebase npm package (which includes both browser and Node.js bundles) provides you with a local copy of the Firebase SDK, which may be needed for non-browser applications such as Node.js apps, React Native, or Electron. The download includes Node.js and React Native bundles as an option for some packages. The Node.js bundles are necessary for the server-side rendering (SSR) step of SSR frameworks.

Using npm with a module bundler such as webpack or Rollup provides optimization options to "tree-shake" unused code and apply targeted polyfills, which can greatly reduce the size footprint of your app. Implementing these features may add some complexity to your configuration and build chain, but various mainstream CLI tools can help mitigate that. These tools include Angular , React , Vue , Next , and others.

В итоге:

  • Обеспечивает ценную оптимизацию размера приложения.
  • Для управления модулями доступны надежные инструменты.
  • Требуется для SSR с Node.js

CDN (сеть доставки контента)

Adding libraries that are stored on Firebase's CDN is a simple SDK setup method that may be familiar to many developers. Using the CDN to add the SDKs, you won't need a build tool, and your build chain may tend to be simpler and easier to work with compared to module bundlers. If you're not especially concerned about the installed size of your app and don't have special requirements such as transpiling from TypeScript, then CDN could be a good choice.

В итоге:

  • Привычный и простой
  • Подходит в случаях, когда размер приложения не является определяющим фактором.
  • Подходит, если ваш веб-сайт не использует инструменты сборки.

Варианты Firebase Web SDK

Веб-SDK Firebase можно использовать как в браузерных, так и в Node-приложениях. Однако некоторые продукты недоступны в средах Node. См. список поддерживаемых сред .

Some product SDKs provide separate browser and Node variants, each of which are provided in both ESM and CJS formats, and some product SDKs even provide Cordova or React Native variants. The web SDK is configured to provide the correct variant based on your tooling config or environment and should not require manual selection in most cases. All SDK variants are designed to help build web apps or client apps for end-user access, such as in a Node.js desktop or IoT application. If your goal is to set up administrative access from privileged environments (such as servers) use the Firebase Admin SDK instead.

Обнаружение окружения с помощью сборщиков и фреймворков

При установке веб-SDK Firebase с помощью npm устанавливаются как версии JavaScript, так и Node.js. Пакет обеспечивает детальное определение среды, позволяющее включить необходимые пакеты для вашего приложения.

If your code uses Node.js require statements, the SDK finds the Node-specific bundle. Otherwise, your bundler's settings must be correctly figured to detect the right entry point field in your package.json file (for example, main , browser , or module ). If you experience runtime errors with the SDK, check to make sure your bundler is configured to prioritize the correct type of bundle for your environment.

Узнайте о конфигурационном объекте Firebase.

Для инициализации Firebase в вашем приложении необходимо предоставить конфигурацию Firebase вашего приложения. Вы можете получить объект конфигурации Firebase в любое время.

  • We do not recommend manually editing your config object, especially the following required "Firebase options": apiKey , projectId , and appID . If you initialize your app with invalid or missing values for these required "Firebase options", users of your app may experience serious issues. The exception to this is the authDomain , which can be updated following Best practices for using signInWithRedirect .

  • Если вы включили Google Analytics в своем проекте Firebase, ваш объект конфигурации содержит поле measurementId . Подробнее об этом поле можно узнать на странице «Начало работы Analytics .

  • Если вы включите Google Analytics или Realtime Database после создания веб-приложения Firebase, убедитесь, что объект конфигурации 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",
  // The value of `storageBucket` depends on when you provisioned your default bucket (learn more)
  storageBucket: "PROJECT_ID.firebasestorage.app",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
  measurementId: "G-MEASUREMENT_ID",
};

Доступные библиотеки

Дополнительные параметры настройки

Отложенная загрузка SDK Firebase (с CDN)

Вы можете отложить включение SDK Firebase до полной загрузки страницы. Если вы используете модульные CDN-скрипты API с <script type="module"> , это поведение по умолчанию. Если вы используете CDN-скрипты с пространством имен в качестве модуля, выполните следующие действия, чтобы отложить загрузку:

  1. Добавьте флаг defer к каждому тегу script для SDK Firebase, затем отложите инициализацию 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 configuration
var firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

Используйте несколько проектов Firebase в одном приложении.

В большинстве случаев инициализацию Firebase достаточно выполнить в одном стандартном приложении. Доступ к Firebase из этого приложения можно получить двумя эквивалентными способами:

Web 

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();

Web 

// 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();

Иногда, однако, возникает необходимость одновременного доступа к нескольким проектам Firebase. Например, может потребоваться чтение данных из базы данных одного проекта Firebase, но хранение файлов в другом проекте Firebase. Или может потребоваться аутентификация одного проекта, в то время как второй проект останется неаутентифицированным.

SDK Firebase JavaScript позволяет инициализировать и использовать несколько проектов Firebase в одном приложении одновременно, при этом каждый проект использует собственную информацию о конфигурации Firebase.

Web 

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);

Web 

// 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();

Запустите локальный веб-сервер для разработки.

Если вы разрабатываете веб-приложение, некоторые части Firebase JavaScript SDK требуют, чтобы ваше веб-приложение запускалось с сервера, а не из локальной файловой системы. Для запуска локального сервера можно использовать Firebase CLI .

Если вы уже настроили Firebase Hosting для своего приложения, вы, возможно, уже выполнили несколько из описанных ниже шагов.

Для запуска вашего веб-приложения вы будете использовать Firebase CLI — инструмент командной строки.

  1. Чтобы узнать, как установить CLI или обновить его до последней версии , посетите документацию Firebase CLI.

  2. Инициализируйте свой проект Firebase. Выполните следующую команду из корневой директории локального каталога вашего приложения: 

    firebase init

  3. Запустите локальный сервер для разработки. Выполните следующую команду из корневого каталога вашего локального приложения: 

    firebase serve

Ресурсы с открытым исходным кодом для JavaScript SDK Firebase

Firebase поддерживает разработку программного обеспечения с открытым исходным кодом, и мы приветствуем вклад и обратную связь от сообщества.

SDK Firebase для JavaScript

Большинство JavaScript SDK для Firebase разрабатываются как библиотеки с открытым исходным кодом в нашем общедоступном репозитории Firebase на GitHub .

Примеры для быстрого старта

Firebase поддерживает коллекцию примеров быстрого запуска для большинства веб-API Firebase. Эти примеры можно найти в нашем общедоступном репозитории Firebase на GitHub . Вы можете использовать эти примеры кода для работы с SDK Firebase.