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

Produto do Firebase Edge Firefox Chrome Safari para iOS Safari
Firebase AI Logic 1
Analytics
App Check
Authentication
Cloud Firestore
(exceto
persistência)

(exceto
persistência
se o iOS for anterior à versão 10)
Cloud Functions
Firebase Instalações
Cloud Messaging
(a partir da versão 17 do Edge, exceto para dispositivos móveis)
Cloud Storage
Data Connect
Performance Monitoring
Realtime Database
Remote Config

1 Firebase AI Logic era chamado de "Vertex AI in Firebase".

Outros ambientes

Produto do Firebase React Native Node.js (18+) Extensões
do Chrome
Cordova
Firebase AI Logic 1
App Check
(usando um provedor personalizado para fazer o atestado dos dispositivos nativos)

(usando um provedor personalizado)
Analytics
Authentication
(consulte a observação)

(consulte a observação)

(consulte a observação)

(consulte a observação)
Cloud Firestore
(exceto
persistência)

(exceto
persistência)
Cloud Functions
Data Connect
Firebase Instalações
Cloud Messaging
Cloud Storage
(exceto
uploads)
Performance Monitoring
Realtime Database
Remote Config

1 Firebase AI Logic era chamado de "Vertex AI in Firebase".

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

Ambientes Polyfills
Safari 7, 8 e 9 ES Stable
Nó anterior à versão 10 ES Stable

Polyfills opcionais

Ambientes Polyfills Produtos do Firebase
  • Safari anterior à versão 10.1
  • iOS anterior à versão 10.3
fetch
  • Authentication
  • Cloud Firestore
  • Cloud Functions
  • Performance Monitoring
  • Nó anterior à versão 18
fetch
  • Authentication
  • Cloud Firestore
  • Cloud Functions
  • Cloud Storage
  • React Native e Expo
base-64
  • Cloud Storage

Polyfills sugeridos

Polyfills Licença
ES Stable MIT
fetch: "cross-fetch", melhor para navegadores mais antigos MIT
fetch: `undici`, a melhor opção para Node.js MIT
base-64 MIT

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.