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

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

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

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

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

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

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

Хотя большая часть модульного API следует тем же шаблонам, что и API с пространством имен, организация кода отличается. Как правило, API с пространством имен ориентирован на пространство имен и шаблон обслуживания, тогда как модульный API ориентирован на дискретные функции. Например, цепочка точек API в пространстве имен, такая как firebaseApp.auth() , заменяется в модульном API одной функцией getAuth() , которая принимает firebaseApp и возвращает экземпляр Authentication .

Это означает, что веб-приложения, созданные с помощью 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 и другие. То, как вы добавляете Firebase SDK в свое веб-приложение, зависит от того, какие инструменты вы используете со своим приложением (например, сборщик модулей).

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

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

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

НПМ

Загрузка пакета Firebase npm (который включает в себя пакеты браузера и Node.js) предоставляет вам локальную копию Firebase SDK, которая может потребоваться для небраузерных приложений, таких как приложения Node.js, React Native или Electron. Загрузка включает в себя пакеты Node.js и React Native в качестве опции для некоторых пакетов. Пакеты Node.js необходимы для этапа рендеринга на стороне сервера (SSR) платформ SSR.

Использование npm с упаковщиком модулей, таким как Webpack или Rollup, предоставляет возможности оптимизации для «встряхивания» неиспользуемого кода и применения целевых полифилов, что может значительно уменьшить размер вашего приложения. Реализация этих функций может усложнить вашу конфигурацию и цепочку сборки, но различные основные инструменты CLI могут помочь смягчить эту ситуацию. К этим инструментам относятся Angular , React , Vue , Next и другие.

В итоге:

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

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

Добавление библиотек, хранящихся в CDN Firebase, — это простой метод установки SDK, который может быть знаком многим разработчикам. Используя CDN для добавления SDK, вам не понадобится инструмент сборки, и ваша цепочка сборки может оказаться проще и легче в работе по сравнению с сборщиками модулей. Если вас не особенно беспокоит установленный размер вашего приложения и у вас нет особых требований, таких как транспиляция из TypeScript, то CDN может быть хорошим выбором.

В итоге:

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

Варианты Firebase Web SDK

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

Некоторые SDK продуктов предоставляют отдельные варианты браузера и Node, каждый из которых предоставляется как в форматах ESM, так и в CJS, а некоторые SDK продуктов даже предоставляют варианты Cordova или React Native. Web SDK настроен на предоставление правильного варианта в зависимости от конфигурации вашего инструмента или среды и в большинстве случаев не требует ручного выбора. Все варианты SDK предназначены для создания веб-приложений или клиентских приложений для доступа конечных пользователей, например, в настольных компьютерах Node.js или приложениях IoT. Если ваша цель — настроить административный доступ из привилегированных сред (например, серверов), используйте вместо этого Firebase Admin SDK .

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

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

Если ваш код использует операторы require Node.js, SDK находит пакет, специфичный для Node. В противном случае настройки вашего сборщика должны быть правильно определены, чтобы определить правильное поле точки входа в вашем файле package.json (например, main , browser или module ). Если у вас возникли ошибки во время выполнения SDK, убедитесь, что ваш сборщик настроен для определения приоритета правильного типа пакета для вашей среды.

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

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

  • Мы не рекомендуем вручную редактировать объект конфигурации, особенно следующие обязательные параметры Firebase: apiKey , projectId и appID . Если вы инициализируете свое приложение с недопустимыми или отсутствующими значениями для этих обязательных «параметров Firebase», у пользователей вашего приложения могут возникнуть серьезные проблемы. Исключением является authDomain , который можно обновить в соответствии с рекомендациями по использованию 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",
  storageBucket: "PROJECT_ID.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
  measurementId: "G-MEASUREMENT_ID",
};

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

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

Задержка загрузки Firebase SDK (из CDN)

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

  1. Добавьте флаг defer в каждый тег script для Firebase SDK, а затем отложите инициализацию 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 project 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();
app_default_init_options.js

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();
firebaseapp.js

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

Firebase JavaScript SDK позволяет инициализировать и использовать несколько проектов 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);
app_multi_project_init_options.js

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();
firebaseapp.js

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

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

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

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

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

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

    firebase init

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

    firebase serve

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

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

SDK Firebase для JavaScript

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

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

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