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

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

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

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

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

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

Модульный API хорошо интегрируется с инструментами сборки, которые удаляют код, который не используется в вашем приложении, процесс, известный как «tree-shaking». Приложения, созданные с помощью этого 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, обеспечивает возможности оптимизации для "tree-shake" неиспользуемого кода и применения целевых полифиллов, что может значительно сократить размер вашего приложения. Реализация этих функций может добавить некоторую сложность вашей конфигурации и цепочке сборки, но различные основные инструменты 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. Веб-SDK настроен на предоставление правильного варианта на основе конфигурации вашего инструментария или среды и в большинстве случаев не требует ручного выбора. Все варианты SDK предназначены для помощи в создании веб-приложений или клиентских приложений для доступа конечного пользователя, например, в настольном приложении Node.js или приложении IoT. Если ваша цель — настроить административный доступ из привилегированных сред (например, серверов), используйте вместо этого Firebase Admin SDK .

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

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

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

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

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

  • Мы не рекомендуем вручную редактировать ваш объект конфигурации, особенно следующие обязательные "Firebase options": apiKey , projectId и appID . Если вы инициализируете свое приложение с недопустимыми или отсутствующими значениями для этих обязательных "Firebase options", пользователи вашего приложения могут столкнуться с серьезными проблемами. Исключением является authDomain , который можно обновить, следуя рекомендациям по использованию signInWithRedirect .

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

  • Если вы включаете Google Analytics или Realtime Database после создания вашего Firebase Web App, убедитесь, что объект конфигурации 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",
};

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

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

Отложенная загрузка 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 CLI для запуска локального сервера.

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

Для обслуживания вашего веб-приложения вы будете использовать 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 поддерживает коллекцию примеров быстрого старта для большинства API Firebase в Интернете. Найдите эти примеры быстрого старта в нашем публичном репозитории быстрого старта Firebase GitHub . Вы можете использовать эти примеры быстрого старта в качестве примера кода для использования Firebase SDK.