Catch up on everthing we announced at this year's Firebase Summit. Learn more

Узнать больше о Интернете и Firebase

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

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

SDK версий 8 и 9

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

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

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

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

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

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

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

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

Для получения дополнительной информации см Путей , чтобы добавить веб - SDKs к вашему приложению и Firebase Web SDK варианте ниже на этой странице.

Версия 9 для новых приложений

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

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

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

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

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

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

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

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

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

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

npm

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

Использование НОГО с модулем пакетирования , таких как WebPack или накопительный пакет предоставляет возможности оптимизации для «дерева» встряски неиспользуемого кода и применять целевой polyfills, которые могут значительно уменьшить размер след вашего приложения. Реализация этих функций может усложнить вашу конфигурацию и цепочку сборки, но различные основные инструменты CLI могут помочь смягчить это. Эти инструменты включают в себя угловые , 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. Пакет обеспечивает подробное определение среды, чтобы включить нужные пакеты для вашего приложения.

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

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

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

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

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

Вот формат объекта конфигурации со всеми включенными службами (эти значения подставляются автоматически):

// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
var firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  databaseURL: "https://PROJECT_ID.firebaseio.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  measurementId: "G-MEASUREMENT_ID",
};

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

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

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

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

  1. Добавить defer флаг каждого script тега для Firebase SDKs, затем отложить инициализацию Firebase с использованием второго сценария, например:

    <script defer src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>
    
    <script defer src="https://www.gstatic.com/firebasejs/8.10.0/firebase-auth.js"></script>
    <script defer src="https://www.gstatic.com/firebasejs/8.10.0/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 из этого приложения двумя эквивалентными способами:

Веб-версия 9

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

Веб-версия 8

// 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.

Веб-версия 9

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

Веб-версия 8

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

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

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

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

    firebase init

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

    firebase serve

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

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

SDK Firebase для JavaScript

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

Примеры быстрого запуска

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