Noções básicas sobre o Firebase para Web

Ao desenvolver um app da Web usando o Firebase, é possível que você encontre conceitos desconhecidos ou áreas em que precisa de mais informações para tomar as decisões corretas para o projeto. Veja nesta página as respostas a essas perguntas ou encontre recursos para saber mais.

Se você tiver perguntas sobre um tópico não abordado nesta página, acesse uma das nossas comunidades on-line. Também atualizaremos esta página com novos tópicos periodicamente, então volte sempre para conferir se adicionamos um tópico de seu interesse.

Versões do SDK: com namespace e modular

O Firebase fornece duas plataformas de API para apps da Web:

  • JavaScript: com namespace. Essa é a interface JavaScript que o Firebase manteve por muitos anos e é conhecida dos desenvolvedores Web com apps mais antigos. Como a API com namespace não se beneficia do suporte contínuo a novos recursos, a maioria dos novos apps precisa adotar a API modular.
  • JavaScript: modular. Esse SDK usa uma abordagem modular que proporciona redução do tamanho do SDK e aumento da eficiência com ferramentas de build modernas para JavaScript, como webpack ou Rollup (links em inglês).

A API modular se integra bem às ferramentas de build que removem o código que não é usado no app, um processo conhecido como "tree shaking". Os apps criados com esse SDK se beneficiam de tamanhos significativamente reduzidos. A API com namespace, embora disponível como um módulo, não tem uma estrutura estritamente modular e não fornece o mesmo grau de redução de tamanho.

A maioria das APIs modulares segue os mesmos padrões da API com namespace, mas a organização do código é diferente. Geralmente, a API com namespace é orientada a um namespace e a um padrão de serviço, enquanto a API modular é voltada para funções distintas. Por exemplo, o encadeamento por pontos da API com namespace, como firebaseApp.auth(), é substituído na API modular por uma única função getAuth() que usa firebaseApp e retorna uma instância do Authentication.

Isso significa que os apps da Web criados com a API com namespace exigem a refatoração para usar o design de app modular. Consulte o guia de upgrade para obter mais detalhes.

JavaScript: API modular para novos apps

Se você estiver começando em uma nova integração com o Firebase, poderá ativar a API modular ao adicionar e inicializar o SDK.

Ao desenvolver o app, o código será organizado principalmente com base em functions. Na API modular, os serviços são transmitidos como o primeiro argumento e, em seguida, a função usa os detalhes do serviço para fazer o resto. Exemplo:

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

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

Para obter mais exemplos e detalhes, consulte os guias de cada área de produto, bem como a documentação de referência da API modular.

Formas de adicionar SDKs da Web ao app

O Firebase fornece bibliotecas JavaScript para a maioria dos produtos do Firebase, incluindo Remote Config, FCM e muito mais. A maneira como você adiciona SDKs do Firebase ao app da Web depende das ferramentas que está usando com o app (como um bundler de módulos).

É possível adicionar qualquer uma das bibliotecas disponíveis ao app usando um destes métodos compatíveis:

  • npm (para bundlers de módulos)
  • CDN (rede de fornecimento de conteúdo)

Para obter instruções detalhadas de configuração, consulte Adicionar o Firebase ao app em JavaScript. O restante desta seção contém informações para ajudar você a escolher entre as opções disponíveis.

npm

O download do pacote npm do Firebase, que inclui pacotes para navegador e Node.js, fornece uma cópia local do SDK do Firebase, que pode ser necessária para aplicativos que não são de navegador, como apps que usam Node.js, React Native ou Electron. O download inclui pacotes do Node.js e React Native como opção para alguns pacotes. Os pacotes do Node.js são necessários para a etapa de renderização do lado do servidor (SSR, na sigla em inglês) dos frameworks de SSR.

O uso do npm com um bundler de módulos, como webpack ou Rollup, oferece opções de otimização para eliminar códigos não usados e aplicar polyfills segmentados, o que pode reduzir consideravelmente o tamanho do app. A implementação desses recursos pode aumentar a complexidade da configuração e da cadeia de build, mas várias ferramentas de CLI conhecidas podem ajudar a mitigar isso. Essas ferramentas incluem Angular, React, Vue, Next e mais.

Em resumo:

  • oferece uma otimização considerável do tamanho do app;
  • tem ferramentas robustas disponíveis para gerenciar módulos;
  • é necessário para usar a SSR com Node.js.

CDN (rede de fornecimento de conteúdo)

Adicionar bibliotecas armazenadas na CDN do Firebase é um método de configuração simples do SDK que muitos desenvolvedores já conhecem. Ao usar a CDN para adicionar os SDKs, você não precisará de uma ferramenta de build. Além disso, é provável que sua cadeia de build seja mais simples e fácil de trabalhar do que os bundlers de módulos. Se o tamanho da instalação do app não for uma das suas preocupações e você não tiver requisitos especiais (como transpilação de TypeScript), a CDN será uma boa escolha.

Em resumo:

  • bem conhecida e simples;
  • indicada para quando o tamanho do app não é uma grande preocupação;
  • indicada quando o site não usa ferramentas de build.

Variantes do SDK da Web do Firebase

O SDK da Web do Firebase pode ser usado em aplicativos de navegador e de nós. No entanto, vários produtos não estão disponíveis em ambientes de nó. Veja a lista de ambientes compatíveis.

Alguns SDKs de produtos fornecem variantes separadas de navegador e nó, cada uma fornecida nos formatos ESM e CJS, e alguns SDKs de produto oferecem até variantes Cordova ou React Native. O SDK da Web está configurado para fornecer a variante correta com base na configuração ou no ambiente das ferramentas e, na maioria dos casos, não exige a seleção manual. Todas as variantes do SDK foram projetadas para ajudar a criar apps da Web ou clientes para acesso do usuário final, como em um aplicativo IoT ou Node.js para computadores. Caso você tenha o objetivo de configurar o acesso administrativo em ambientes privilegiados, como servidores, use o Firebase Admin SDK.

Detecção de ambiente com bundlers e frameworks

Quando você instala o SDK da Web do Firebase usando o npm, as versões do JavaScript e Node.js são instaladas. O pacote fornece detecção detalhada do ambiente para ativar os pacotes corretos no seu aplicativo.

Se o código usar instruções require do Node.js, o SDK encontrará o pacote específico do Node. Caso contrário, as configurações do bundler precisarão ser corretamente identificadas para detectar o campo de ponto de entrada correto no arquivo package.json, como main, browser ou module. Se você encontrar erros de ambiente de execução com o SDK, verifique se o bundler está configurado para priorizar o tipo de pacote correto para o ambiente.

Saiba mais sobre o objeto de configuração do Firebase

Para inicializar o Firebase no seu aplicativo, é preciso fornecer a configuração do projeto do Firebase dele. É possível conseguir o objeto de configuração do Firebase a qualquer momento.

  • Não recomendamos editar manualmente o objeto de configuração, especialmente as seguintes "Opções do Firebase" obrigatórias: apiKey, projectId e appID. Se você inicializar o app com valores inválidos ou ausentes para essas "opções do Firebase" obrigatórias, os usuários do app poderão ter problemas sérios. A exceção é o authDomain, que pode ser atualizado seguindo Práticas recomendadas para usar o signInWithRedirect.

  • Se você ativou Google Analytics no seu projeto do Firebase, o objeto de configuração contém o campo measurementId. Saiba mais sobre esse campo na página de primeiras etapas do Analytics.

  • Se você ativar Google Analytics ou Realtime Database depois de criar seu app da Web do Firebase, confira se o objeto de configuração do Firebase usado no seu app está atualizado com os valores de configuração associados (measurementId e databaseURL, respectivamente). É possível obter o objeto de configuração do Firebase a qualquer momento.

Este é o formato de um objeto de configuração com todos os serviços ativados (esses valores são preenchidos automaticamente):

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",
};

Bibliotecas disponíveis

Outras opções de configuração

Atrasar o carregamento de SDKs do Firebase pela CDN

Você pode atrasar a inclusão dos SDKs do Firebase até que a página inteira seja carregada. Se você estiver usando scripts modulares de CDN de API com <script type="module">, esse será o comportamento padrão. Se você estiver usando scripts de CDN com namespace como um módulo, conclua estas etapas para adiar o carregamento:

  1. Adicione uma sinalização defer a cada tag script dos SDKs do Firebase e adie a inicialização do Firebase usando um segundo script, por exemplo:

    <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. Crie um arquivo init-firebase.js e inclua o seguinte nele:

    // TODO: Replace the following with your app's Firebase project configuration
var firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

Usar vários projetos do Firebase em um único app

Na maioria dos casos, você só precisa inicializar o Firebase em um único app padrão. É possível acessar o Firebase pelo app de duas maneiras equivalentes:

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

Às vezes, no entanto, você precisa acessar vários projetos do Firebase ao mesmo tempo. Por exemplo, talvez você queira ler os dados do banco de dados de um projeto do Firebase, mas precise armazenar os arquivos em um projeto diferente, ou então, queira autenticar um projeto e manter outro sem autenticação.

Com o SDK do Firebase para JavaScript, é possível inicializar e usar vários projetos do Firebase em um único app ao mesmo tempo, em que cada um mantém suas próprias informações de configuração.

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

Executar um servidor da Web local para desenvolvimento

Ao criar um app da Web, algumas partes do SDK do Firebase para JavaScript exigem que o app da Web seja hospedado por um servidor, em vez de um sistema de arquivos local. É possível usar a CLI do Firebase para executar um servidor local.

Se você já configurou o Firebase Hosting para o app, talvez já tenha concluído várias das etapas abaixo.

Para disponibilizar seu app da Web, você usará a CLI do Firebase, uma ferramenta de linha de comando.

  1. Verifique a documentação da CLI do Firebase para saber como instalar a CLI ou atualizar para a versão mais recente.

  2. Inicialize seu projeto do Firebase. Execute o seguinte comando na raiz do seu diretório de app local:

    firebase init

  3. Inicie o servidor local para desenvolvimento. Execute o seguinte comando na raiz do seu diretório de app local:

    firebase serve

Recursos de código aberto para SDKs do Firebase para JavaScript

O Firebase é compatível com o desenvolvimento de código aberto. Por isso, incentivamos contribuições e feedback da comunidade.

SDKs do Firebase para JavaScript

A maioria dos SDKs do Firebase para JavaScript é desenvolvida como bibliotecas de código aberto no nosso repositório público do Firebase no GitHub.

Amostras introdutórias

O Firebase mantém uma coleção de amostras introdutórias para a maioria das APIs do Firebase na Web. Encontre essas amostras no nosso repositório público de amostras introdutórias do Firebase no GitHub. É possível usar esses guias de início rápido como código de exemplo para usar os SDKs do Firebase.