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 corretas 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 on-line . Também atualizaremos esta página com novos tópicos periodicamente, portanto, verifique novamente se adicionamos o tópico sobre o qual você deseja aprender.
SDK versões 8 e 9
O Firebase oferece duas versões do SDK para aplicativos da Web:
- Versão 8. Essa é a interface JavaScript que o Firebase mantém há vários anos e é familiar para desenvolvedores da Web com aplicativos Firebase existentes. Como o Firebase removerá o suporte para esta versão após um grande ciclo de lançamento, os novos aplicativos devem adotar a versão 9.
- Versão modular 9 . Este SDK apresenta uma abordagem modular que fornece um tamanho de SDK reduzido e maior eficiência com ferramentas de construção JavaScript modernas, como webpack ou Rollup .
A versão 9 integra-se bem com ferramentas de compilação que removem o código que não está sendo usado em seu aplicativo, um processo conhecido como "agitação de árvore". Os aplicativos criados com esse SDK se beneficiam de dimensões 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 maioria 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 namespace e padrão de serviço, enquanto a versão 9 é orientada para funções discretas. Por exemplo, o encadeamento de pontos da versão 8, como firebaseApp.auth()
, é substituído na versão 9 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 versão 8 ou anterior exigem refatoração para aproveitar a abordagem modular da versão 9. O Firebase fornece bibliotecas compatíveis para facilitar essa transição; consulte o guia de atualização para obter mais detalhes.
O que é suportado?
Embora a versão 8 e a versão 9 tenham estilos de código diferentes, elas oferecem suporte muito semelhante para recursos e opções do Firebase. Como descreveremos em detalhes neste guia, ambas as versões do SDK são compatíveis com as variantes JavaScript e Node.js, além de várias opções para adicionar/instalar os SDKs.
Adicione SDKs com | 8.0 (com namespace) | 9.0 (Modular) |
---|---|---|
npm |
|
|
CDN (Rede de Entrega de Conteúdo) |
|
|
URLs de hospedagem |
|
Para obter mais informações, consulte Formas de adicionar os SDKs da Web ao seu aplicativo e as variantes do SDK da Web do Firebase posteriormente nesta página.
Versão 9 para novos aplicativos
Se você estiver iniciando uma nova integração com o Firebase, poderá optar pelo SDK da versão 9 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 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 obter mais exemplos e detalhes, consulte os guias de cada área de produto, bem como a documentação de referência da 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. A forma como você adiciona SDKs do Firebase ao seu aplicativo da Web depende de quais ferramentas você está usando com seu aplicativo (como um empacotador de módulos) ou se seu aplicativo é executado em um ambiente sem navegador, como Node.js.
Você pode adicionar qualquer uma das bibliotecas disponíveis ao seu aplicativo por meio de um dos métodos compatíveis:
- npm (para empacotadores de módulos e Node.js)
- CDN (rede de entrega 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 são de navegador, como aplicativos Node.js, React Native ou Electron. O download inclui pacotes Node.js e React Native como 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.
O uso do npm com um empacotador de módulo, como webpack ou Rollup , oferece opções de otimização para "agitar em árvore" 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 principais 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 entrega de conteúdo)
Adicionar bibliotecas armazenadas na 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 compilação, e sua cadeia de compilação tende a ser mais simples e fácil de trabalhar em comparação com os empacotadores de módulos. 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 seu site não usa ferramentas de construção.
Variantes do SDK da Web do Firebase
Atualmente, o Firebase oferece duas variantes do SDK da Web:
- 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 recursos do Firebase, mas não a todos. Consulte a lista de ambientes suportados .
Essas duas 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 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 seu aplicativo.
Se seu código usa instruções require
do Node.js, o SDK encontra o pacote específico do Node. Caso contrário, as configurações do seu bundler devem ser calculadas corretamente para detectar o campo de ponto de entrada correto em seu arquivo package.json
(por exemplo, main
, browser
ou module
). Se ocorrerem erros de tempo de execução com o SDK, verifique se o bundler está configurado para priorizar o tipo correto de bundle para 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
eappID
. 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 problemas sérios.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 o Firebase Web App, verifique se o objeto de configuração do Firebase que você usa no seu aplicativo está atualizado com os valores de configuração associados (
measurementId
edatabaseURL
, 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 (da CDN)
Você pode atrasar a inclusão dos SDKs do Firebase até que a página inteira seja carregada. Se você estiver usando scripts CDN da versão 9 com <script type="module">
, esse é o comportamento padrão. Se você estiver usando scripts CDN da versão 8 como um módulo, conclua estas etapas para adiar o carregamento:
Adicione um sinalizador de
defer
a cada tag descript
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>
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 desse aplicativo 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, 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 você pode querer autenticar um projeto enquanto mantém um segundo projeto não autenticado.
O SDK do Firebase 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.
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();
Execute um servidor web local para desenvolvimento
Se você estiver criando um aplicativo da Web, algumas partes do SDK de JavaScript do Firebase exigem que você veicule seu aplicativo da Web a partir de um servidor em vez do sistema de arquivos local. Você pode usar a Firebase CLI para executar um servidor local.
Se você já configurou o Firebase Hosting para seu aplicativo, talvez já tenha concluído várias das etapas abaixo.
Para veicular seu aplicativo da Web, você usará a Firebase CLI, uma ferramenta de linha de comando.
Visite a documentação da Firebase CLI 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 diretório do seu aplicativo local:
firebase init
Vincula seu diretório de aplicativos local ao Firebase
Gera um arquivo
firebase.json
(um arquivo necessário para o Firebase Hosting)Solicita que você especifique um diretório raiz público que contém seus arquivos estáticos públicos (HTML, CSS, JS, etc.)
O nome padrão do diretório que o Firebase procura é "público". Você também pode definir o diretório público posteriormente modificando diretamente seu arquivo
firebase.json
.
Inicie o servidor local para desenvolvimento. Execute o seguinte comando na raiz do diretório do seu aplicativo local:
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 do Firebase JavaScript é desenvolvida 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 esses guias de início rápido como código de exemplo para usar os SDKs do Firebase.