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

Atualize da versão 8 para o SDK da Web modular

Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.

Os aplicativos que usam o Firebase Web SDK versão 8 ou anterior devem considerar a migração para a versão 9 seguindo as instruções deste guia.

Este guia pressupõe que você esteja familiarizado com a versão 8 e que aproveitará um empacotador de módulos, como webpack ou Rollup , para atualização e desenvolvimento contínuo da versão 9.

O uso de um empacotador de módulos em seu ambiente de desenvolvimento é altamente recomendado. Se você não usar um, não poderá aproveitar os principais benefícios da versão 9 no tamanho reduzido do aplicativo. Você precisará de npm ou yarn para instalar o SDK.

As etapas de upgrade neste guia serão baseadas em um aplicativo da Web imaginário que usa os SDKs de autenticação e Cloud Firestore. Ao trabalhar com os exemplos, você pode dominar os conceitos e as etapas práticas necessárias para atualizar todos os SDKs da Web do Firebase compatíveis.

Sobre as bibliotecas compatíveis

Há dois tipos de bibliotecas disponíveis para o Firebase Web SDK versão 9:

  • Modular - uma nova superfície de API projetada para facilitar o tree-shaking (remoção de código não utilizado) para tornar seu aplicativo da Web o mais pequeno e rápido possível.
  • Compat - uma superfície de API familiar que é totalmente compatível com a versão 8 do SDK, permitindo que você atualize para a versão 9 sem alterar todo o código do Firebase de uma só vez. As bibliotecas de compatibilidade têm pouca ou nenhuma vantagem de tamanho ou desempenho sobre suas contrapartes da versão 8.

Este guia pressupõe que você aproveitará as bibliotecas de compatibilidade da versão 9 para facilitar sua atualização. Essas bibliotecas permitem que você continue usando o código da versão 8 junto com o código refatorado para a versão 9. Isso significa que você pode compilar e depurar seu aplicativo com mais facilidade enquanto trabalha no processo de atualização.

Para aplicativos com uma exposição muito pequena ao Firebase Web SDK – por exemplo, um aplicativo que faz apenas uma simples chamada para as APIs de autenticação – pode ser prático refatorar o código da versão 8 sem usar as bibliotecas de compatibilidade da versão 9. Se você estiver atualizando um aplicativo desse tipo, siga as instruções neste guia para a "versão 9 modular" sem usar as bibliotecas de compatibilidade.

Sobre o processo de atualização

Cada etapa do processo de atualização tem escopo para que você possa concluir a edição da origem do seu aplicativo e, em seguida, compilá-lo e executá-lo sem interrupções. Em resumo, veja o que você fará para atualizar um aplicativo:

  1. Adicione as bibliotecas da versão 9 e as bibliotecas de compatibilidade ao seu aplicativo.
  2. Atualize as instruções de importação em seu código para compatibilidade com v9.
  3. Refatore o código de um único produto (por exemplo, Autenticação) para o estilo modular.
  4. Opcional: neste ponto, remova a biblioteca de compatibilidade de autenticação e o código de compatibilidade para autenticação para obter o benefício do tamanho do aplicativo para autenticação antes de continuar.
  5. Refatore funções para cada produto (por exemplo, Cloud Firestore, FCM, etc.) para o estilo modular, compilando e testando até que todas as áreas estejam concluídas.
  6. Atualize o código de inicialização para o estilo modular.
  7. Remova todas as instruções de compatibilidade e código de compatibilidade restantes da versão 9 do seu aplicativo.

Obtenha o SDK da versão 9

Para começar, obtenha as bibliotecas da versão 9 e as bibliotecas de compatibilidade usando npm:

npm i firebase@9.14.0

# OR

yarn add firebase@9.14.0

Atualizar importações para compatibilidade com v9

Para manter seu código funcionando após atualizar sua dependência de v8 para v9 beta, altere suas instruções de importação para usar a versão "compat" de cada importação. Por exemplo:

Antes: versão 8

import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';

Depois: versão 9 compatível

// v9 compat packages are API compatible with v8 code
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

Refatorar para o estilo modular

Enquanto as APIs da versão 8 são baseadas em um namespace encadeado por pontos e padrão de serviço, a abordagem modular da versão 9 significa que seu código será organizado principalmente em torno de funções . Na versão 9, o pacote firebase/app e outros pacotes não retornam uma exportação abrangente que contém todos os métodos do pacote. Em vez disso, os pacotes exportam funções individuais.

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. Vamos examinar como isso funciona em dois exemplos que refatoram chamadas para as APIs Authentication e Cloud Firestore.

Exemplo 1: refatorando uma função de autenticação

Antes: versão 9 compatível

O código de compatibilidade da versão 9 é idêntico ao código da versão 8, mas as importações foram alteradas.

import firebase from "firebase/compat/app";
import "firebase/compat/auth";

const auth = firebase.auth();
auth.onAuthStateChanged(user => { 
  // Check for user status
});

Depois: versão 9 modular

A função getAuth usa firebaseApp como seu primeiro parâmetro. A função onAuthStateChanged não é encadeada da instância de auth como seria na versão 8; em vez disso, é uma função livre que usa auth como seu primeiro parâmetro.

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

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

Manipulação de atualização do método de autenticação getRedirectResult

A versão 9 apresenta uma alteração importante em getRedirectResult . Quando nenhuma operação de redirecionamento é chamada, a Versão 9 retorna null em oposição à Versão 8, que retornou uma UserCredential com um usuário null .

Antes: versão 9 compatível

const result = await auth.getRedirectResult()
if (result.user === null && result.credential === null) {
  return null;
}
return result;

Depois: versão 9 modular

const result = await getRedirectResult(auth);
// Provider of the access token could be Facebook, Github, etc.
if (result === null || provider.credentialFromResult(result) === null) {
  return null;
}
return result;

Exemplo 2: refatoração de uma função do Cloud Firestore

Antes: versão 9 compatível

import "firebase/compat/firestore"

const db = firebase.firestore();
db.collection("cities").where("capital", "==", true)
    .get()
    .then((querySnapshot) => {
        querySnapshot.forEach((doc) => {
            // doc.data() is never undefined for query doc snapshots
            console.log(doc.id, " => ", doc.data());
        });
    })
    .catch((error) => {
        console.log("Error getting documents: ", error);
    });

Depois: versão 9 modular

A função getFirestore usa firebaseApp como seu primeiro parâmetro, que foi retornado de initializeApp em um exemplo anterior. Observe como o código para formar uma consulta é muito diferente na versão 9; não há encadeamento e métodos como query ou where agora são expostos como funções livres.

import { getFirestore, collection, query, where, getDocs } from "firebase/firestore";

const db = getFirestore(firebaseApp);

const q = query(collection(db, "cities"), where("capital", "==", true));

const querySnapshot = await getDocs(q);
querySnapshot.forEach((doc) => {
  // doc.data() is never undefined for query doc snapshots
  console.log(doc.id, " => ", doc.data());
});

Atualizar referências ao Firestore DocumentSnapshot.exists

A versão 9 apresenta uma alteração importante na qual a propriedade firestore.DocumentSnapshot.exists foi alterada para um método . A funcionalidade é essencialmente a mesma (testar se um documento existe), mas você deve refatorar seu código para usar o método v9 conforme mostrado:

Antes: versão 9 compatível

if (snapshot.exists) {
  console.log("the document exists");
}

Depois: versão 9 modular

if (snapshot.exists()) {
  console.log("the document exists");
}

Exemplo 3: combinando estilos de código da versão 8 e da versão 9

O uso das bibliotecas de compatibilidade durante o upgrade permite que você continue usando o código da versão 8 junto com o código refatorado para a versão 9. Isso significa que você pode manter o código existente da versão 8 para o Cloud Firestore enquanto refatora a autenticação ou outro código do SDK do Firebase para o estilo da versão 9 e ainda compilar com sucesso seu aplicativo com ambos os estilos de código. O mesmo vale para o código da versão 8 e da versão 9 em um produto como o Cloud Firestore; estilos de código novos e antigos podem coexistir, desde que você esteja importando os pacotes compat:

import firebase from 'firebase/compat/app';
import 'firebase/compat/firestore';
import { getDoc } from 'firebase/firestore'

const docRef = firebase.firestore().doc();
getDoc(docRef);

Lembre-se de que, embora seu aplicativo seja compilado, você não obterá os benefícios de tamanho de aplicativo do código modular até remover totalmente as instruções de compat e o código do seu aplicativo.

Atualizar código de inicialização

Atualize o código de inicialização do seu aplicativo para usar a nova sintaxe modular da versão 9. É importante atualizar esse código depois de concluir a refatoração de todo o código em seu aplicativo; isso ocorre porque firebase.initializeApp() inicializa o estado global para as APIs compat e modular, enquanto a função modular initializeApp() inicializa apenas o estado para modular.

Antes: versão 9 compatível

import firebase from "firebase/compat/app"

firebase.initializeApp({ /* config */ });

Depois: versão 9 modular

import { initializeApp } from "firebase/app"

const firebaseApp = initializeApp({ /* config */ });

Remover código de compatibilidade

Para perceber os benefícios de tamanho do SDK modular da versão 9, você deve eventualmente converter todas as invocações para o estilo modular mostrado acima e remover todas as instruções de import "firebase/compat/* do seu código. Quando terminar, não deve haver mais referências ao namespace global firebase.* ou qualquer outro código no estilo do SDK da versão 8.

Usando a biblioteca compat da janela

O SDK da versão 9 é otimizado para trabalhar com módulos em vez do objeto de window do navegador. As versões anteriores da biblioteca permitiam o carregamento e o gerenciamento do Firebase usando o namespace window.firebase . Isso não é recomendado daqui para frente, pois não permite a eliminação de código não utilizado. No entanto, a versão compatível do SDK do JavaScript funciona com a window para desenvolvedores que preferem não iniciar imediatamente o caminho de atualização modular.

<script src="https://www.gstatic.com/firebasejs/9.14.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.14.0/firebase-firestore-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.14.0/firebase-auth-compat.js"></script>
<script>
   const firebaseApp = firebase.initializeApp({ /* Firebase config */ });
   const db = firebaseApp.firestore();
   const auth = firebaseApp.auth();
</script>

A biblioteca de compatibilidade usa o código modular da versão 9 sob o capô e fornece a mesma API que o SDK da versão 8; isso significa que você pode consultar a referência da API da versão 8 e os snippets de código da versão 8 para obter detalhes. Este método não é recomendado para uso a longo prazo, mas como um começo para atualizar para a biblioteca totalmente modular da versão 9.

Benefícios e limitações da versão 9

A versão 9 totalmente modularizada tem as seguintes vantagens em relação às versões anteriores:

  • A versão 9 permite um tamanho de aplicativo drasticamente reduzido. Ele adota o formato de módulo JavaScript moderno, permitindo práticas de "agitação de árvore" nas quais você importa apenas os artefatos de que seu aplicativo precisa. Dependendo do seu aplicativo, a vibração da árvore com a versão 9 pode resultar em 80% menos kilobytes do que um aplicativo comparável criado com a versão 8.
  • A versão 9 continuará a se beneficiar do desenvolvimento contínuo de recursos, enquanto a versão 8 será congelada em um ponto no futuro.