O Google tem o compromisso de promover a igualdade racial para as comunidades negras. Saiba como.

Saiba mais sobre a Web e Firebase

Ao desenvolver um aplicativo da Web usando o Firebase, você pode encontrar conceitos desconhecidos ou áreas em que 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 aprender mais.

Se você tiver dúvidas sobre um tópico não abrangidos nesta página, visite um dos nossos comunidades online . Também atualizaremos esta página com novos tópicos periodicamente, portanto, verifique novamente se adicionamos o tópico sobre o qual deseja aprender.

SDK versões 8 e 9

O Firebase fornece duas versões de SDK para aplicativos da Web, uma das quais atualmente está em Beta:

  • Versão 8. Esta é a interface JavaScript que Firebase manteve por vários anos e é familiar para os desenvolvedores da Web com aplicativos Firebase existentes.
  • Versão Modular 9 (Beta). Este SDK introduz uma abordagem modular que fornece o tamanho SDK e maior eficiência reduzida com ferramentas modernas de construção de JavaScript como Webpack ou Rollup .

A versão 9 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 "agitação de árvore". Os aplicativos desenvolvidos com este SDK se beneficiam de pegadas de tamanho bastante reduzidas. A versão 8, embora disponível como módulo, não possui uma estrutura estritamente modular e não oferece o mesmo grau de redução de tamanho.

Embora a maior parte do SDK da versão 9 siga os mesmos padrões da versão 8, a organização do código é diferente. Geralmente, a versão 8 é orientada para um espaço de nomes e padrão de serviço, enquanto a versão 9 é orientada para funções discretas. Por exemplo, versão 8 do dot-encadeamento, tais como firebaseApp.auth() , é substituída na versão 9 por um único getAuth() a função que leva firebaseApp e retorna uma instância de autenticação.

Isso significa que os aplicativos da Web criados com a versão 8 ou anterior exigem refatoração para aproveitar as vantagens da abordagem modular da versão 9. O Firebase fornece bibliotecas compatíveis para facilitar essa transição; veja o guia de atualização para obter mais detalhes.

O que é compatível?

Embora a versão 8 e a versão 9 (Beta) tenham estilos de código diferentes, elas oferecem suporte muito semelhante para recursos e opções do Firebase. Conforme descreveremos em detalhes neste guia, ambas as versões do SDK oferecem suporte a variantes de JavaScript e Node.js, juntamente com várias opções para adicionar / instalar os SDKs.

Adicionar SDKs com 8.0 (espaço de nomes) 9.0 (beta modular)
npm
  • Para JavaScript
  • Para Node.js
  • Para JavaScript
  • Para Node.js
CDN (Rede de distribuição de conteúdo)
  • Para JavaScript
  • Para JavaScript
URLs de hospedagem
  • Para JavaScript
  • Para Node.js
  • Em breve para JavaScript e Node.js

Para mais informações, consulte Maneiras de adicionar os SDKs da Web para seu aplicativo e Firebase Web SDK variantes mais tarde nesta página.

Versão 9 para novos aplicativos

Se você está começando em uma nova integração com o Firebase, você pode optar para a versão 9 Beta SDK quando você adicionar e inicializar o SDK .

Como você desenvolver seu aplicativo, tenha em mente que o seu código será organizado principalmente em torno de funções. Na versão 9, os serviços são passados ​​como o 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 mais exemplos e detalhes, consulte os guias para cada área de produto, bem como a documentação de referência versão 9 .

Maneiras de adicionar os SDKs da Web ao seu aplicativo

O Firebase fornece bibliotecas JavaScript para a maioria dos produtos Firebase, incluindo Configuração remota, FCM e muito mais. Como você adiciona SDKs do Firebase ao seu aplicativo da Web depende se você escolheu usar o Firebase Hosting para seu aplicativo, quais ferramentas você está usando com seu aplicativo (como um empacotador de módulo) ou se seu aplicativo é executado em um navegador diferente ambiente como Node.js.

Você pode adicionar qualquer um dos bibliotecas disponíveis para seu aplicativo através de um dos métodos suportados:

  • npm (para empacotadores de módulo e Node.js)
  • CDN (rede de distribuição de conteúdo)
  • URLs de hospedagem do Firebase

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

npm

Baixar o pacote npm do Firebase (que inclui pacotes de navegador e Node.js) fornece uma cópia local do Firebase SDK, que pode ser necessária para aplicativos sem 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) de estruturas SSR.

Usando npm com um módulo bundler como Webpack ou Rollup oferece opções de otimização para "árvore-shake" código não utilizado e aplicar polyfills alvo, o que pode reduzir significativamente a pegada tamanho do seu aplicativo. Implementar esses 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 , Reagir , Vue , Avançar , e outros.

Resumindo:

  • Fornece otimização de tamanho de aplicativo valiosa
  • 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 empacotadores de módulo. Se você não estiver especialmente preocupado com o tamanho instalado do seu aplicativo e não tiver 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 usa ferramentas de construção.

URLs de hospedagem

O Firebase Hosting fornece URLs reservados que permitem melhorar o desempenho carregando arquivos da mesma origem. Se você já está usando ou planeja usar o Firebase Hosting em seu aplicativo, pode adicionar SDKs de JavaScript por meio de URLs de hospedagem e se beneficiar desse ganho de desempenho. Além disso, esse método oferece suporte à inicialização automática do SDK, o que pode simplificar o gerenciamento de vários ambientes, como desenvolvimento, teste e produção. Saiba mais sobre a adição de SDKs via URLs de hospedagem reservados .

Resumindo:

  • Fornece uma ligeira vantagem de desempenho em relação ao CDN
  • Pode simplificar o trabalho em vários ambientes de desenvolvimento
  • Conveniente para aplicativos que já usam o Firebase Hosting

Variantes do Firebase Web SDK

Atualmente, o Firebase oferece duas variantes do Web SDK:

  • Um pacote JavaScript compatível com todos os recursos do Firebase para uso no navegador.
  • Um pacote Node.js do lado do cliente que oferece suporte a muitos - mas não todos - recursos do Firebase. Veja a lista de ambientes suportados .

Ambas as variantes do SDK são projetadas para ajudar a construir aplicativos da web ou aplicativos cliente para acesso do usuário final, como em um desktop Node.js ou aplicativo IoT. Se o seu objetivo é a criação de acesso administrativo a partir de ambientes privilegiados (como servidores) usar o Firebase administração SDK em seu lugar.

Detecção de ambiente com bundlers e frameworks

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 o seu aplicativo.

Se o seu código usa Node.js require declarações, o SDK encontra o pacote específico do Node. Caso contrário, as configurações do seu bundler deve ser calculada corretamente para detectar o campo ponto de entrada para a direita em sua package.json arquivo (por exemplo, main , browser , ou module ). Se você tiver erros de tempo de execução com o SDK, verifique se seu bundler está configurado para priorizar o tipo correto de bundle para seu ambiente.

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.

  1. Adicionar um defer bandeira para cada script tag para o Firebase SDKs, então adiar a inicialização do Firebase usando um segundo script, por exemplo:

    <script defer src="https://www.gstatic.com/firebasejs/8.8.0/firebase-app.js"></script>
    
    <script defer src="https://www.gstatic.com/firebasejs/8.8.0/firebase-auth.js"></script>
    <script defer src="https://www.gstatic.com/firebasejs/8.8.0/firebase-firestore.js"></script>
    
    // ...
    
    <script defer src="./init-firebase.js"></script>
    
  2. Criar um init-firebase.js arquivo, em seguida, incluir 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 desse aplicativo de duas maneiras equivalentes:

// Initialize Firebase with a "default" Firebase project
var defaultProject = firebase.initializeApp(firebaseConfig);

console.log(defaultProject.name);  // "[DEFAULT]"

// Option 1: Access Firebase services via the defaultProject variable
var defaultStorage = defaultProject.storage();
var defaultFirestore = defaultProject.firestore();

// Option 2: Access Firebase services using shorthand notation
defaultStorage = firebase.storage();
defaultFirestore = firebase.firestore();

À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 Firebase, mas armazenar arquivos em um projeto Firebase diferente. Ou você pode querer autenticar um projeto enquanto mantém um segundo projeto não autenticado.

O SDK do Firebase para JavaScript 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.

// Initialize Firebase with a default Firebase project
firebase.initializeApp(firebaseConfig);

// Initialize Firebase with a second Firebase project
var 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
var defaultStorage = firebase.storage();
var defaultFirestore = firebase.firestore();

// Use the otherProject variable to access the second project's Firebase services
var otherStorage = otherProject.storage();
var otherFirestore = otherProject.firestore();

Execute um servidor da web local para desenvolvimento

Se você estiver construindo um aplicativo da web, algumas partes do SDK do Firebase para JavaScript exigem que você sirva seu aplicativo da web a partir de um servidor, em vez do sistema de arquivos local. Você pode usar o Firebase CLI para executar um servidor local.

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

Para servir seu aplicativo da web, você usará a Firebase CLI, uma ferramenta de linha de comando.

  1. Visite a documentação Firebase CLI para aprender a instalar o CLI ou atualização para sua versão mais recente .

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

    firebase init

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

    firebase serve

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

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

SDKs de JavaScript do Firebase

A maioria dos Firebase JavaScript SDKs são desenvolvidos como bibliotecas de código aberto no nosso público repositório 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. Encontrar estes quickstarts no nosso público repositório quickstart Firebase GitHub . Você pode usar esses guias de início rápido como código de exemplo para usar SDKs do Firebase.