Узнайте больше о Интернете и 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 с пространством имен, требуют рефакторинга, чтобы использовать преимущества модульного дизайна приложений. Дополнительные сведения см. в руководстве по обновлению .

Что поддерживается?

Хотя API с пространством имен и модульный API имеют разные стили кода, они обеспечивают очень похожую поддержку функций и параметров Firebase. Как мы подробно опишем в этом руководстве, обе версии SDK поддерживают варианты JavaScript и Node.js, а также несколько вариантов добавления/установки SDK.

Добавьте SDK с помощью Пространство имен Модульный
нпм
  • Для JavaScript
  • Для Node.js
  • Для JavaScript
  • Для Node.js
CDN (сеть доставки контента)
  • Для JavaScript
  • Для JavaScript
URL-адреса хостинга
  • Для JavaScript
  • Для Node.js

Дополнительные сведения см. в разделе Способы добавления веб-пакетов SDK в ваше приложение и варианты веб-пакетов SDK Firebase далее на этой странице.

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 в свое веб-приложение, зависит от того, какие инструменты вы используете с вашим приложением (например, сборщик модулей) или от того, работает ли ваше приложение в небраузерной среде, такой как Node.js.

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

  • npm (для сборщиков модулей и Node.js)
  • 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

В настоящее время Firebase предоставляет два варианта веб-SDK:

  • Пакет JavaScript, поддерживающий все функции Firebase для использования в браузере.
  • Клиентский пакет Node.js, поддерживающий многие, но не все, функции Firebase. См. список поддерживаемых сред .

Оба этих варианта 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», пользователи вашего приложения могут столкнуться с серьезными проблемами.

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

  • Если вы включаете Google Analytics или базу данных в реальном времени после создания веб-приложения 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, пока не загрузится вся страница. Если вы используете сценарии CDN версии 9 с <script type="module"> , это поведение по умолчанию. Если вы используете сценарии CDN версии 8 в качестве модуля, выполните следующие действия, чтобы отложить загрузку:

  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 modular API

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 namespaced API

// 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 modular API

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 namespaced API

// 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 поддерживает разработку с открытым исходным кодом, и мы приветствуем вклад и отзывы сообщества.

SDK Firebase для JavaScript

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

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

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