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 ver se adicionamos um tópico de seu interesse.
SDK versões 8 e 9
O Firebase fornece duas versões do SDK para apps da Web:
- Versão 8. Essa é a interface JavaScript mantida pelo Firebase há vários anos. Essa versão é muito conhecida por desenvolvedores da Web com experiência em apps do Firebase. Como o suporte a essa versão não será mais oferecido no Firebase após um ciclo de lançamento principal, os novos apps deverão adotar a versão 9.
- Versão modular 9. Esse SDK traz uma abordagem modular que proporciona redução no tamanho do SDK e aumento na eficiência com ferramentas de build modernas para JavaScript, como webpack ou Rollup.
A versão 9 se integra bem às ferramentas de build que removem o código que não está sendo usado no app. Esse processo é conhecido como "tree-shaking". Os apps criados com esse SDK se beneficiam de tamanhos significativamente reduzidos. Por mais que a versão 8 esteja disponível como um módulo, ela não tem uma estrutura estritamente modular e não fornece o mesmo grau de redução de tamanho.
Embora a maior parte da versão 9 do SDK siga os mesmos padrões da versão 8,
a organização do código é diferente. Em geral, a versão 8 é
voltada para um padrão de namespace e serviço, enquanto a versão 9 é voltada
para funções discretas. Por exemplo, a cadeia de pontos da versão 8, como
firebaseApp.auth(), é substituída na versão 9 por uma única função getAuth()
que usa firebaseApp e retorna uma instância do Authentication.
Ou seja, os apps da Web criados com a versão 8 ou com versões anteriores exigem uma refatoração para aproveitar a abordagem modular da versão 9. O Firebase fornece bibliotecas de compatibilidade para facilitar essa transição. Para mais detalhes, consulte o guia de upgrade.
O que é compatível?
Embora as versões 8 e 9 tenham estilos de código diferentes, elas têm uma compatibilidade muito semelhante com os recursos e opções do Firebase. Como descrevemos detalhadamente neste guia, as duas versões do SDK são compatíveis com variantes JavaScript e Node.js, além de várias opções para adicionar/instalar os SDKs.
| Adicionar SDKs com | 8.0 (com namespace) | 9.0 (modular) |
|---|---|---|
| npm |
|
|
| CDN (rede de fornecimento de conteúdo) |
|
|
| URLs do Hosting |
|
Para mais informações, consulte as Formas de adicionar os SDKs da Web ao app e as Variantes do SDK da Web do Firebase mais adiante nesta página.
Versão 9 para apps novos
Se você estiver começando em uma nova integração com o Firebase, poderá optar pela versão 9 do SDK ao adicionar e inicializar o SDK.
Ao desenvolver o app, o código será organizado principalmente em torno de funções. Na versão 9, 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 mais exemplos e detalhes, consulte os guias de cada área de produto, bem como a documentação de referência da versão 9.
Formas de adicionar SDKs da Web ao app
O Firebase fornece bibliotecas de JavaScript para a maioria dos produtos do Firebase, incluindo o recurso Configuração remota, o 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) ou se o app é executado em um ambiente fora do navegador, como Node.js.
É possível adicionar qualquer uma das bibliotecas disponíveis ao app usando um destes métodos compatíveis:
- npm (para bundlers de módulos e Node.js)
- CDN (rede de fornecimento de conteúdo)
Para 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
Atualmente, o Firebase oferece duas variantes de SDK da Web:
- Um pacote do JavaScript compatível com todos os recursos do Firebase para uso no navegador.
- Um pacote do Node.js no lado do cliente compatível com muitos recursos do Firebase, mas não todos. Veja a lista de ambientes compatíveis.
Ambas as variantes de SDK foram projetadas para ajudar a criar apps da Web ou clientes para acesso do usuário final, como em um aplicativo Node.js para computadores ou IoT. Caso você tenha o objetivo de configurar o acesso administrativo em ambientes privilegiados, como servidores, use o SDK Admin do Firebase.
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,projectIdeappID. 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.Se você ativou o 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 primeiros passos do Analytics.Se você ativar o Google Analytics ou o 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 (
measurementIdedatabaseURL, respectivamente). É possível acessar 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",
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
Outras opções de instalação
Atrasar o carregamento de SDKs do Firebase pela CDN
É possível atrasar a inclusão dos SDKs do Firebase até que a página inteira seja
carregada. Se você estiver usando scripts de CDN da versão 9 com <script type="module">,
esse será o comportamento padrão. Se você estiver usando scripts da CDN de versão 8 como um
módulo, conclua estas etapas para adiar o carregamento:
Adicione uma sinalização
defera cada tagscriptdos 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>Crie um arquivo
init-firebase.jse 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 version 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();
Web version 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();
À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 version 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);
Web version 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();
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.
Verifique a documentação da CLI do Firebase para saber como instalar a CLI ou atualizar para a versão mais recente.
Inicialize seu projeto do Firebase. Execute o seguinte comando na raiz do seu diretório de app local:
firebase init
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.