Saiba mais sobre Web e Firebase

Ao desenvolver um aplicativo da Web usando o Firebase, você poderá encontrar conceitos desconhecidos ou áreas nas quais precisa de mais informações para tomar as decisões certas para seu projeto. Esta página tem como objetivo responder a essas perguntas ou indicar recursos para saber mais.

Se você tiver dúvidas sobre um tópico não abordado nesta página, visite uma de nossas comunidades online . Também atualizaremos esta página com novos tópicos periodicamente, então volte para ver se adicionamos o tópico sobre o qual você deseja aprender.

Versões do SDK: com namespace e modular

O Firebase fornece duas superfícies de API para aplicativos da Web:

  • JavaScript - com espaço para nome. Esta é a interface JavaScript que o Firebase mantém por muitos anos e é familiar aos desenvolvedores da Web com aplicativos Firebase mais antigos. Como a API com namespace não se beneficia do suporte contínuo a novos recursos, a maioria dos novos aplicativos deveria adotar a API modular.
  • JavaScript - modular . Este SDK é baseado em uma abordagem modular que fornece tamanho reduzido do SDK e maior eficiência com ferramentas modernas de construção de JavaScript, como webpack ou Rollup .

A API modular integra-se bem com ferramentas de construção que eliminam o código que não está sendo usado em seu aplicativo, um processo conhecido como "trevo de árvore". Os aplicativos desenvolvidos com este SDK se beneficiam de dimensões bastante reduzidas. A API com namespace, embora disponível como módulo, não possui uma estrutura estritamente modular e não fornece o mesmo grau de redução de tamanho.

Embora a maior parte da API modular siga os mesmos padrões da API com namespace, a organização do código é diferente. Geralmente, a API com namespace é orientada para um namespace e padrão de serviço, enquanto a API modular é orientada para funções discretas. Por exemplo, o encadeamento de 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 de autenticação.

Isso significa que os aplicativos Web criados com a API com namespace exigem refatoração para aproveitar as vantagens do design modular do aplicativo. Consulte o guia de atualização para obter mais detalhes.

JavaScript – API modular para novos aplicativos

Se você estiver iniciando uma nova integração com o Firebase, poderá optar pela API modular ao adicionar e inicializar o SDK .

Ao desenvolver seu aplicativo, lembre-se de que seu código será organizado principalmente em torno de funções . Na API modular, os serviços são passados ​​como primeiro argumento e a função usa os detalhes do serviço para fazer o resto. Por 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 .

Maneiras de adicionar Web SDKs ao seu aplicativo

O Firebase fornece bibliotecas JavaScript para a maioria dos produtos Firebase, incluindo Configuração remota, FCM e muito mais. A forma como você adiciona SDKs do Firebase ao seu aplicativo da Web depende das ferramentas que você está usando com seu aplicativo (como um empacotador de módulo).

Você pode adicionar qualquer uma das bibliotecas disponíveis ao seu aplicativo por meio de um dos métodos suportados:

  • npm (para empacotadores de módulos)
  • CDN (rede de distribuição de conteúdo)

Para obter instruções detalhadas de configuração, consulte Adicionar o Firebase ao seu aplicativo JavaScript . O restante desta seção contém informações para ajudá-lo a escolher entre as opções disponíveis.

npm

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

Usar o npm com um empacotador de módulo, como webpack ou Rollup , fornece opções de otimização para "sacudir a árvore" do código não utilizado e aplicar polyfills direcionados, o que pode reduzir bastante o tamanho do seu aplicativo. A implementação desses recursos pode adicionar alguma complexidade à sua configuração e cadeia de construção, mas várias ferramentas CLI convencionais podem ajudar a mitigar isso. Essas ferramentas incluem Angular , React , Vue , Next e outras.

Resumindo:

  • Fornece otimização valiosa do tamanho do aplicativo
  • Ferramentas robustas estão disponíveis para gerenciar módulos
  • Obrigatório para SSR com Node.js

CDN (rede de distribuição de conteúdo)

Adicionar bibliotecas armazenadas no CDN do Firebase é um método simples de configuração do SDK que pode ser familiar para muitos desenvolvedores. Usando o CDN para adicionar os SDKs, você não precisará de uma ferramenta de construção, e sua cadeia de construção pode tender a ser mais simples e fácil de trabalhar em comparação com os empacotadores de módulos. Se você não está especialmente preocupado com o tamanho instalado do seu aplicativo e não tem requisitos especiais, como transpilar do TypeScript, o CDN pode ser uma boa escolha.

Resumindo:

  • Familiar e simples
  • Apropriado quando o tamanho do aplicativo não é uma grande preocupação
  • Apropriado quando o seu site não utiliza ferramentas de construção.

Variantes do SDK da Web do Firebase

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

Alguns SDKs de produtos fornecem variantes separadas de navegador e Node, cada uma delas fornecida nos formatos ESM e CJS, e alguns SDKs de produtos fornecem até variantes Cordova ou React Native. O Web SDK está configurado para fornecer a variante correta com base na configuração ou ambiente de ferramentas e não deve exigir seleção manual na maioria dos casos. Todas as variantes do SDK são projetadas para ajudar a criar aplicativos web ou aplicativos cliente para acesso do usuário final, como em um desktop Node.js ou aplicativo IoT. Se seu objetivo é configurar o acesso administrativo de ambientes privilegiados (como servidores), use o SDK Admin do Firebase .

Detecção de ambiente com empacotadores e estruturas

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

Se o seu 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 seu bundler deverão ser definidas corretamente para detectar o campo de ponto de entrada correto no seu arquivo package.json (por exemplo, main , browser ou module ). Se você tiver erros de tempo de execução com o SDK, verifique se o seu bundler está configurado para priorizar o tipo correto de pacote para o seu ambiente.

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

Para inicializar o Firebase no seu aplicativo, você precisa fornecer a configuração do projeto do Firebase do seu aplicativo. Você pode obter seu objeto de configuração do Firebase a qualquer momento.

  • Não recomendamos editar manualmente seu objeto de configuração, especialmente as seguintes "opções do Firebase" obrigatórias: apiKey , projectId e appID . Se você inicializar seu aplicativo com valores inválidos ou ausentes para essas "opções do Firebase" obrigatórias, os usuários do seu aplicativo poderão enfrentar sérios problemas.

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

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

Aqui está o formato de um objeto de configuração com todos os serviços habilitados (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",
  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",
};

Bibliotecas disponíveis

Opções de configuração adicionais

Atrasar o carregamento de SDKs do Firebase (do 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 API CDN com <script type="module"> , este é o comportamento padrão. Se você estiver usando scripts CDN com namespace como um módulo, conclua estas etapas para adiar o carregamento:

  1. Adicione um sinalizador 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 no arquivo:

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

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

Use vários projetos do Firebase em um único aplicativo

Na maioria dos casos, você só precisa inicializar o Firebase em um único aplicativo padrão. Você pode acessar o Firebase nesse aplicativo de duas maneiras equivalentes:

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

Às vezes, porém, você precisa acessar vários projetos do Firebase ao mesmo tempo. Por exemplo, você pode querer ler dados do banco de dados de um projeto do Firebase, mas armazenar arquivos em um projeto diferente do Firebase. Ou talvez você queira autenticar um projeto enquanto mantém um segundo projeto não autenticado.

O SDK JavaScript do Firebase permite inicializar e usar vários projetos do Firebase em um único aplicativo ao mesmo tempo, com cada projeto usando suas próprias informações de configuração do 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

Execute um servidor web local para desenvolvimento

Se você estiver criando um aplicativo da Web, algumas partes do SDK JavaScript do Firebase exigem que você forneça seu aplicativo da Web a partir de um servidor, e não do sistema de arquivos local. Você pode usar a CLI do Firebase para executar um servidor local.

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

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

  1. Acesse 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 diretório local do seu aplicativo:

    firebase init

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

    firebase serve

Recursos de código aberto para SDKs JavaScript do Firebase

O Firebase oferece suporte ao desenvolvimento de código aberto e incentivamos contribuições e comentários da comunidade.

SDKs JavaScript do Firebase

A maioria dos SDKs JavaScript do Firebase são desenvolvidos como bibliotecas de código aberto em nosso repositório público do Firebase GitHub .

Amostras de início rápido

O Firebase mantém uma coleção de exemplos de início rápido para a maioria das APIs do Firebase na Web. Encontre esses guias de início rápido em nosso repositório público de início rápido do Firebase GitHub . Você pode usar estes guias de início rápido como código de exemplo para usar SDKs do Firebase.