Ambientes compatíveis com o SDK do Firebase para JavaScript

Ambientes compatíveis

O SDK Firebase JavaScript tem compatibilidade oficial com os seguintes ambientes:

Navegadores

Outros ambientes

Polyfills

O SDK Firebase JavaScript foi criado com base nos padrões mais recentes da plataforma da Web. Alguns navegadores e ambientes JavaScript mais antigos não são compatíveis com todos os recursos exigidos pelo Firebase. Se a compatibilidade com esses navegadores/ambientes for necessária, será preciso carregar os polyfills adequadamente.

As seções abaixo identificam a maioria dos polyfills que podem ser necessários.

Polyfills obrigatórios

Polyfills opcionais

Polyfills sugeridos

Configuração necessária dos polyfills para React Native e Expo

Para React Native e Expo, se você estiver fazendo upload de uma string codificada em base64, faça o seguinte:

Instale base-64 a partir do npm:

npm install base-64

Importe decode de base-64 e anexe-o ao escopo global como atob para que Cloud Storage possa acessá-lo.

import { decode } from 'base-64';

if(typeof atob === 'undefined') {
  global.atob = decode;
}

Adicione polyfills ao seu aplicativo

Opção 1: (recomendado) usar o bundler integrado ao Babel

Se você estiver usando um bundler, integre-o ao Babel e ao @babel/preset-env para receber os polyfills.

Use o guia de configuração interativo do Babel para aprender como integrar o Babel ao seu bundler.

Com o Babel, você não precisa se preocupar com os polyfills exatos que serão incluídos. Em vez disso, você especifica os ambientes de navegador mínimos que precisam de suporte. O Babel então adiciona os polyfills necessários para você e garante que os requisitos para suporte ao navegador sejam sempre cumpridos, mesmo que o Firebase ou seu próprio código comecem a usar novos recursos de ES.

Na página @babel/preset-env, há informações detalhadas sobre as opções de configuração disponíveis para especificar objetivos de ambiente (opção targets) e adicionar polyfills (opção useBuiltIns).

Opção 2: (Não recomendado) adicionar polyfills manualmente

É possível adicionar polyfills manualmente usando suas bibliotecas favoritas de polyfills (por exemplo, core-js).

import 'core-js/stable'
import 'cross-fetch/polyfill';

O core-js também fornece um arquivo de polyfill único que pode ser incluído diretamente na página HTML.

Essa opção pode ser uma maneira conveniente de gerenciar os polyfills se você não usa o Babel. No entanto, não recomendamos essa opção para aplicativos de produção, porque ela provavelmente incluirá polyfills desnecessários, o que aumentará o peso da página e, consequentemente, o tempo de carregamento dela.